gentleface

Gentleface › Layout & interface › toggle

toggle icon

Toggle: toggle, toggle on, enabled, switch on. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

SVGPNG 16PNG 32PNG 48

Code line-round

SVG
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11.84 3.351C12.482 3.605 13.047 3.976 13.536 4.464C14.024 4.953 14.395 5.518 14.649 6.16C14.883 6.751 15 7.364 15 8C15 8.636 14.883 9.249 14.649 9.84C14.395 10.482 14.024 11.047 13.536 11.536C13.047 12.024 12.482 12.395 11.84 12.649C11.249 12.883 10.636 13 10 13L6 13C5.364 13 4.751 12.883 4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3L10 3C10.636 3 11.249 3.117 11.84 3.351ZM10 6C8.895 6 8 6.895 8 8C8 9.105 8.895 10 10 10C11.105 10 12 9.105 12 8C12 6.895 11.105 6 10 6Z"/></svg>
React
// Gentleface "toggle" (line-round), MIT. https://gentleface.com/icons/toggle
import type { SVGProps } from 'react';

export function ToggleIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M11.84 3.351C12.482 3.605 13.047 3.976 13.536 4.464C14.024 4.953 14.395 5.518 14.649 6.16C14.883 6.751 15 7.364 15 8C15 8.636 14.883 9.249 14.649 9.84C14.395 10.482 14.024 11.047 13.536 11.536C13.047 12.024 12.482 12.395 11.84 12.649C11.249 12.883 10.636 13 10 13L6 13C5.364 13 4.751 12.883 4.16 12.649C3.518 12.395 2.953 12.024 2.464 11.536C1.976 11.047 1.605 10.482 1.351 9.84C1.117 9.249 1 8.636 1 8C1 7.364 1.117 6.751 1.351 6.16C1.605 5.518 1.976 4.953 2.464 4.464C2.953 3.976 3.518 3.605 4.16 3.351C4.751 3.117 5.364 3 6 3L10 3C10.636 3 11.249 3.117 11.84 3.351ZM10 6C8.895 6 8 6.895 8 8C8 9.105 8.895 10 10 10C11.105 10 12 9.105 12 8C12 6.895 11.105 6 10 6Z" />
    </svg>
  );
}
Vue
Vue: see /icons/toggle.md
Svelte
Svelte: see /icons/toggle.md
HTML img
HTML img: see /icons/toggle.md
CSS
CSS: see /icons/toggle.md
Data URL
Data URL: see /icons/toggle.md
Sprite
Sprite: see /icons/toggle.md
SwiftUI
SwiftUI: see /icons/toggle.md
Compose
Compose: see /icons/toggle.md
Android XML
Android XML: see /icons/toggle.md
Flutter
Flutter: see /icons/toggle.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for
toggle, toggle on, enabled, switch on, toggle switch
Alternatives
Don’t confuse with
Also fits
  • toggle off: the on state (toggle-on)
Not for
  • swap (use arrow-left-right): toggle is an on/off switch control, not swapping two things
  • light switch (use light-switch): toggle is the UI switch control
  • progress bar (use progress-bar): a capsule with a knob is the on/off switch
  • segmented control (use segmented-control): toggle is a two-state switch with a knob
  • slider (use slider): an on/off switch (toggle)
  • feature flag (use flag-code): the UI switch control
Tags
toggle, switch, on, enabled, setting, option, active
Category
Layout & interface
Component name
ToggleIcon
History
  • added

Family 32

browsercardscolumnscolumns-gearkanbanlayoutlayout-dashboardlayout-dashboard-gearlayout-dashboard-pencillayout-dashboard-pluslayout-dashboard-sparklemaximize

More layout & interface icons

apps checkbox checkbox-indeterminate checkbox-off cursor cursor-text cursor-user drag-drop grid grip-horizontal grip-vertical hand hand-grab hand-off hand-pointer input-search · all layout & interface icons

For agents

Metadata: /icons/toggle.json · Markdown: /icons/toggle.md · SVG: https://gentleface.com/svg/{style}/16/toggle.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/toggle.png

Feedback