{
 "name": "segmented-control",
 "title": "Segmented control",
 "component": "SegmentedControlIcon",
 "url": "https://gentleface.com/icons/segmented-control",
 "category": "layout",
 "motif": "segmented-control",
 "added": "2026-10-19",
 "history": [
  {
   "date": "2026-10-19",
   "what": [
    "added"
   ]
  }
 ],
 "geometry_hash": "23c6a2613de6",
 "use_for": [
  "segmented control",
  "toggle group",
  "button group",
  "segmented button"
 ],
 "dont_confuse_with": [
  {
   "icon": "toggle",
   "why": "toggle is a two-state switch with a knob",
   "concept": "segmented-control"
  },
  {
   "icon": "tabs",
   "why": "tabs switch between pages and are drawn as raised tabs",
   "concept": "segmented-control"
  }
 ],
 "also_fits": [
  {
   "concept": "button-element",
   "owner": "button",
   "why": "several joined buttons (button-group)"
  },
  {
   "concept": "tabs",
   "owner": "tabs",
   "why": "switch views inside a section of a page (segmented-control)"
  }
 ],
 "family": [],
 "tags": [
  "segmented control",
  "segmented button",
  "toggle group",
  "button group",
  "segments",
  "switch",
  "tabs",
  "view switcher",
  "options",
  "ui control"
 ],
 "size": 16,
 "styles": [
  "line-round",
  "line-soft",
  "line-sharp",
  "solid-round",
  "solid-soft",
  "solid-sharp"
 ],
 "default_style": "line-round",
 "svg": {
  "line-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M12 4C12.254 4 12.5 4.047 12.736 4.14C12.993 4.242 13.219 4.391 13.414 4.586C13.609 4.781 13.758 5.007 13.86 5.264C13.953 5.5 14 5.746 14 6L14 9C14 9.254 13.953 9.5 13.86 9.736C13.758 9.993 13.609 10.219 13.414 10.414C13.219 10.609 12.993 10.758 12.736 10.86C12.5 10.953 12.254 11 12 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 6C1 5.746 1.047 5.5 1.14 5.264C1.242 5.007 1.391 4.781 1.586 4.586C1.781 4.391 2.007 4.242 2.264 4.14C2.5 4.047 2.746 4 3 4L12 4ZM3 5C2.873 5 2.75 5.023 2.632 5.07C2.504 5.121 2.391 5.195 2.293 5.293C2.195 5.391 2.121 5.504 2.07 5.632C2.023 5.75 2 5.873 2 6L2 9C2 9.127 2.023 9.25 2.07 9.368C2.121 9.496 2.195 9.609 2.293 9.707C2.391 9.805 2.504 9.879 2.632 9.93C2.75 9.977 2.873 10 3 10L5 10L5 5L3 5ZM10 10L12 10C12.127 10 12.25 9.977 12.368 9.93C12.496 9.879 12.609 9.805 12.707 9.707C12.805 9.609 12.879 9.496 12.93 9.368C12.977 9.25 13 9.127 13 9L13 6C13 5.873 12.977 5.75 12.93 5.632C12.879 5.504 12.805 5.391 12.707 5.293C12.609 5.195 12.496 5.121 12.368 5.07C12.25 5.023 12.127 5 12 5L10 5L10 10Z\"/></svg>",
  "line-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M13 4C13.276 4 13.512 4.098 13.707 4.293C13.902 4.488 14 4.724 14 5L14 10C14 10.276 13.902 10.512 13.707 10.707C13.512 10.902 13.276 11 13 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 5C1 4.724 1.098 4.488 1.293 4.293C1.488 4.098 1.724 4 2 4L13 4ZM2 9.5C2 9.638 2.049 9.756 2.146 9.854C2.244 9.951 2.362 10 2.5 10L5 10L5 5L2.5 5C2.362 5 2.244 5.049 2.146 5.146C2.049 5.244 2 5.362 2 5.5L2 9.5ZM10 5L10 10L12.5 10C12.638 10 12.756 9.951 12.854 9.854C12.951 9.756 13 9.638 13 9.5L13 5.5C13 5.362 12.951 5.244 12.854 5.146C12.756 5.049 12.638 5 12.5 5L10 5Z\"/></svg>",
  "line-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M1 11L1 4L14 4L14 11L1 11ZM2 10L5 10L5 5L2 5L2 10ZM10 5L10 10L13 10L13 5L10 5Z\"/></svg>",
  "solid-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M12 4C12.254 4 12.5 4.047 12.736 4.14C12.993 4.242 13.219 4.391 13.414 4.586C13.609 4.781 13.758 5.007 13.86 5.264C13.953 5.5 14 5.746 14 6L14 9C14 9.254 13.953 9.5 13.86 9.736C13.758 9.993 13.609 10.219 13.414 10.414C13.219 10.609 12.993 10.758 12.736 10.86C12.5 10.953 12.254 11 12 11L3 11C2.746 11 2.5 10.953 2.264 10.86C2.007 10.758 1.781 10.609 1.586 10.414C1.391 10.219 1.242 9.993 1.14 9.736C1.047 9.5 1 9.254 1 9L1 6C1 5.746 1.047 5.5 1.14 5.264C1.242 5.007 1.391 4.781 1.586 4.586C1.781 4.391 2.007 4.242 2.264 4.14C2.5 4.047 2.746 4 3 4L12 4ZM3 5C2.873 5 2.75 5.023 2.632 5.07C2.504 5.121 2.391 5.195 2.293 5.293C2.195 5.391 2.121 5.504 2.07 5.632C2.023 5.75 2 5.873 2 6L2 9C2 9.127 2.023 9.25 2.07 9.368C2.121 9.496 2.195 9.609 2.293 9.707C2.391 9.805 2.504 9.879 2.632 9.93C2.75 9.977 2.873 10 3 10L5 10L5 5L3 5ZM10 10L12 10C12.127 10 12.25 9.977 12.368 9.93C12.496 9.879 12.609 9.805 12.707 9.707C12.805 9.609 12.879 9.496 12.93 9.368C12.977 9.25 13 9.127 13 9L13 6C13 5.873 12.977 5.75 12.93 5.632C12.879 5.504 12.805 5.391 12.707 5.293C12.609 5.195 12.496 5.121 12.368 5.07C12.25 5.023 12.127 5 12 5L10 5L10 10Z\"/></svg>",
  "solid-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M13 4C13.276 4 13.512 4.098 13.707 4.293C13.902 4.488 14 4.724 14 5L14 10C14 10.276 13.902 10.512 13.707 10.707C13.512 10.902 13.276 11 13 11L2 11C1.724 11 1.488 10.902 1.293 10.707C1.098 10.512 1 10.276 1 10L1 5C1 4.724 1.098 4.488 1.293 4.293C1.488 4.098 1.724 4 2 4L13 4ZM2 9.5C2 9.638 2.049 9.756 2.146 9.854C2.244 9.951 2.362 10 2.5 10L5 10L5 5L2.5 5C2.362 5 2.244 5.049 2.146 5.146C2.049 5.244 2 5.362 2 5.5L2 9.5ZM10 5L10 10L12.5 10C12.638 10 12.756 9.951 12.854 9.854C12.951 9.756 13 9.638 13 9.5L13 5.5C13 5.362 12.951 5.244 12.854 5.146C12.756 5.049 12.638 5 12.5 5L10 5Z\"/></svg>",
  "solid-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M1 11L1 4L14 4L14 11L1 11ZM2 10L5 10L5 5L2 5L2 10ZM10 5L10 10L13 10L13 5L10 5Z\"/></svg>"
 },
 "svg_url": {
  "line-round": "https://gentleface.com/svg/line-round/16/segmented-control.svg",
  "line-soft": "https://gentleface.com/svg/line-soft/16/segmented-control.svg",
  "line-sharp": "https://gentleface.com/svg/line-sharp/16/segmented-control.svg",
  "solid-round": "https://gentleface.com/svg/solid-round/16/segmented-control.svg",
  "solid-soft": "https://gentleface.com/svg/solid-soft/16/segmented-control.svg",
  "solid-sharp": "https://gentleface.com/svg/solid-sharp/16/segmented-control.svg"
 },
 "png_url": {
  "line-round": {
   "16": "https://gentleface.com/png/line-round/16/segmented-control.png",
   "32": "https://gentleface.com/png/line-round/32/segmented-control.png",
   "48": "https://gentleface.com/png/line-round/48/segmented-control.png"
  },
  "line-soft": {
   "16": "https://gentleface.com/png/line-soft/16/segmented-control.png",
   "32": "https://gentleface.com/png/line-soft/32/segmented-control.png",
   "48": "https://gentleface.com/png/line-soft/48/segmented-control.png"
  },
  "line-sharp": {
   "16": "https://gentleface.com/png/line-sharp/16/segmented-control.png",
   "32": "https://gentleface.com/png/line-sharp/32/segmented-control.png",
   "48": "https://gentleface.com/png/line-sharp/48/segmented-control.png"
  },
  "solid-round": {
   "16": "https://gentleface.com/png/solid-round/16/segmented-control.png",
   "32": "https://gentleface.com/png/solid-round/32/segmented-control.png",
   "48": "https://gentleface.com/png/solid-round/48/segmented-control.png"
  },
  "solid-soft": {
   "16": "https://gentleface.com/png/solid-soft/16/segmented-control.png",
   "32": "https://gentleface.com/png/solid-soft/32/segmented-control.png",
   "48": "https://gentleface.com/png/solid-soft/48/segmented-control.png"
  },
  "solid-sharp": {
   "16": "https://gentleface.com/png/solid-sharp/16/segmented-control.png",
   "32": "https://gentleface.com/png/solid-sharp/32/segmented-control.png",
   "48": "https://gentleface.com/png/solid-sharp/48/segmented-control.png"
  }
 },
 "license": "MIT",
 "author": "Alexander Kiselev"
}