Gentleface › Layout & interface › toggle-off

toggle-off icon

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

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="M2.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.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.536ZM11.472 11.719C11.986 11.516 12.438 11.219 12.828 10.828C13.219 10.438 13.516 9.986 13.719 9.472C13.906 8.999 14 8.509 14 8C14 7.491 13.906 7.001 13.719 6.528C13.516 6.014 13.219 5.562 12.828 5.172C12.438 4.781 11.986 4.484 11.472 4.281C10.999 4.094 10.509 4 10 4L6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L10 12C10.509 12 10.999 11.906 11.472 11.719ZM4.14 7.264C4.242 7.007 4.391 6.781 4.586 6.586C4.781 6.391 5.007 6.242 5.264 6.14C5.5 6.047 5.746 6 6 6C6.254 6 6.5 6.047 6.736 6.14C6.993 6.242 7.219 6.391 7.414 6.586C7.609 6.781 7.758 7.007 7.86 7.264C7.953 7.5 8 7.746 8 8C8 8.254 7.953 8.5 7.86 8.736C7.758 8.993 7.609 9.219 7.414 9.414C7.219 9.609 6.993 9.758 6.736 9.86C6.5 9.953 6.254 10 6 10C5.746 10 5.5 9.953 5.264 9.86C5.007 9.758 4.781 9.609 4.586 9.414C4.391 9.219 4.242 8.993 4.14 8.736C4.047 8.5 4 8.254 4 8C4 7.746 4.047 7.5 4.14 7.264Z"/></svg>

React

// Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off
import type { SVGProps } from 'react';

export function ToggleOffIcon(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="M2.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.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.536ZM11.472 11.719C11.986 11.516 12.438 11.219 12.828 10.828C13.219 10.438 13.516 9.986 13.719 9.472C13.906 8.999 14 8.509 14 8C14 7.491 13.906 7.001 13.719 6.528C13.516 6.014 13.219 5.562 12.828 5.172C12.438 4.781 11.986 4.484 11.472 4.281C10.999 4.094 10.509 4 10 4L6 4C5.491 4 5.001 4.094 4.528 4.281C4.014 4.484 3.562 4.781 3.172 5.172C2.781 5.562 2.484 6.014 2.281 6.528C2.094 7.001 2 7.491 2 8C2 8.509 2.094 8.999 2.281 9.472C2.484 9.986 2.781 10.438 3.172 10.828C3.562 11.219 4.014 11.516 4.528 11.719C5.001 11.906 5.491 12 6 12L10 12C10.509 12 10.999 11.906 11.472 11.719ZM4.14 7.264C4.242 7.007 4.391 6.781 4.586 6.586C4.781 6.391 5.007 6.242 5.264 6.14C5.5 6.047 5.746 6 6 6C6.254 6 6.5 6.047 6.736 6.14C6.993 6.242 7.219 6.391 7.414 6.586C7.609 6.781 7.758 7.007 7.86 7.264C7.953 7.5 8 7.746 8 8C8 8.254 7.953 8.5 7.86 8.736C7.758 8.993 7.609 9.219 7.414 9.414C7.219 9.609 6.993 9.758 6.736 9.86C6.5 9.953 6.254 10 6 10C5.746 10 5.5 9.953 5.264 9.86C5.007 9.758 4.781 9.609 4.586 9.414C4.391 9.219 4.242 8.993 4.14 8.736C4.047 8.5 4 8.254 4 8C4 7.746 4.047 7.5 4.14 7.264Z" />
    </svg>
  );
}

Vue

Vue: see /icons/toggle-off.md

Svelte

Svelte: see /icons/toggle-off.md

HTML img

HTML img: see /icons/toggle-off.md

CSS

CSS: see /icons/toggle-off.md

Data URL

Data URL: see /icons/toggle-off.md

Sprite

Sprite: see /icons/toggle-off.md

SwiftUI

SwiftUI: see /icons/toggle-off.md

Compose

Compose: see /icons/toggle-off.md

Android XML

Android XML: see /icons/toggle-off.md

Flutter

Flutter: see /icons/toggle-off.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 off, switch off, off state

Alternatives

toggle: the on state (toggle-on)

Also fits

toggle: the off state (toggle-off)

Tags

toggle, switch, off, disabled, setting, option, inactive

Category

Layout & interface

Component name

ToggleOffIcon

History

2026-10-14 added

Family 32

browser cards columns columns-gear kanban layout layout-dashboard layout-dashboard-gear layout-dashboard-pencil layout-dashboard-plus layout-dashboard-sparkle maximize

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-off.json · Markdown: /icons/toggle-off.md · SVG: https://gentleface.com/svg/{style}/16/toggle-off.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/toggle-off.png

toggle-off icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp