# toggle-off icon

Toggle off. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/toggle-off

- Category: Layout & interface
- Use it for: toggle off, switch off, off state
- Tags: toggle, switch, off, disabled, setting, option, inactive
- Family: browser, cards, columns, columns-gear, kanban, layout, layout-dashboard, layout-dashboard-gear, layout-dashboard-pencil, layout-dashboard-plus, layout-dashboard-sparkle, maximize, minimize, panel-bottom, picture-in-picture, picture-in-picture-exit, pin, rows, sidebar, sidebar-collapse, sidebar-expand, sidebar-right, table-arrow-down, table-arrow-up, table-gear, table-lock, table-search, table-sparkle, tabs, timeline, toggle, window
- Component name: ToggleOffIcon
- Added: 2026-10-14

## Alternatives

- `toggle`: the on state (toggle-on)

## Also fits

- toggle: the off state (toggle-off)

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/toggle-off.svg · PNG https://gentleface.com/png/line-round/16/toggle-off.png · https://gentleface.com/png/line-round/32/toggle-off.png · https://gentleface.com/png/line-round/48/toggle-off.png
- line-soft: https://gentleface.com/svg/line-soft/16/toggle-off.svg · PNG https://gentleface.com/png/line-soft/16/toggle-off.png · https://gentleface.com/png/line-soft/32/toggle-off.png · https://gentleface.com/png/line-soft/48/toggle-off.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/toggle-off.svg · PNG https://gentleface.com/png/line-sharp/16/toggle-off.png · https://gentleface.com/png/line-sharp/32/toggle-off.png · https://gentleface.com/png/line-sharp/48/toggle-off.png
- solid-round: https://gentleface.com/svg/solid-round/16/toggle-off.svg · PNG https://gentleface.com/png/solid-round/16/toggle-off.png · https://gentleface.com/png/solid-round/32/toggle-off.png · https://gentleface.com/png/solid-round/48/toggle-off.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/toggle-off.svg · PNG https://gentleface.com/png/solid-soft/16/toggle-off.png · https://gentleface.com/png/solid-soft/32/toggle-off.png · https://gentleface.com/png/solid-soft/48/toggle-off.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/toggle-off.svg · PNG https://gentleface.com/png/solid-sharp/16/toggle-off.png · https://gentleface.com/png/solid-sharp/32/toggle-off.png · https://gentleface.com/png/solid-sharp/48/toggle-off.png

The SVG of every style: https://gentleface.com/icons/toggle-off.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```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

```tsx
// 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
<!-- Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off -->
<template>
  <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>
</template>
```

### Svelte

```svelte
<!-- Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off -->
<script>
  let props = $props();
</script>

<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>
```

### HTML img

```html
<!-- Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/toggle-off.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off. Takes the text color. */
.icon-toggle-off {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#toggle-off"/></svg>
```

### SwiftUI

```swift
// Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off
import SwiftUI

struct ToggleOffIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 2.464, y: 11.536))
        p.addCurve(to: CGPoint(x: 1.351, y: 9.84), control1: CGPoint(x: 1.976, y: 11.047), control2: CGPoint(x: 1.605, y: 10.482))
        p.addCurve(to: CGPoint(x: 1, y: 8), control1: CGPoint(x: 1.117, y: 9.249), control2: CGPoint(x: 1, y: 8.636))
        p.addCurve(to: CGPoint(x: 1.351, y: 6.16), control1: CGPoint(x: 1, y: 7.364), control2: CGPoint(x: 1.117, y: 6.751))
        p.addCurve(to: CGPoint(x: 2.464, y: 4.464), control1: CGPoint(x: 1.605, y: 5.518), control2: CGPoint(x: 1.976, y: 4.953))
        p.addCurve(to: CGPoint(x: 4.16, y: 3.351), control1: CGPoint(x: 2.953, y: 3.976), control2: CGPoint(x: 3.518, y: 3.605))
        p.addCurve(to: CGPoint(x: 6, y: 3), control1: CGPoint(x: 4.751, y: 3.117), control2: CGPoint(x: 5.364, y: 3))
        p.addLine(to: CGPoint(x: 10, y: 3))
        p.addCurve(to: CGPoint(x: 11.84, y: 3.351), control1: CGPoint(x: 10.636, y: 3), control2: CGPoint(x: 11.249, y: 3.117))
        p.addCurve(to: CGPoint(x: 13.536, y: 4.464), control1: CGPoint(x: 12.482, y: 3.605), control2: CGPoint(x: 13.047, y: 3.976))
        p.addCurve(to: CGPoint(x: 14.649, y: 6.16), control1: CGPoint(x: 14.024, y: 4.953), control2: CGPoint(x: 14.395, y: 5.518))
        p.addCurve(to: CGPoint(x: 15, y: 8), control1: CGPoint(x: 14.883, y: 6.751), control2: CGPoint(x: 15, y: 7.364))
        p.addCurve(to: CGPoint(x: 14.649, y: 9.84), control1: CGPoint(x: 15, y: 8.636), control2: CGPoint(x: 14.883, y: 9.249))
        p.addCurve(to: CGPoint(x: 13.536, y: 11.536), control1: CGPoint(x: 14.395, y: 10.482), control2: CGPoint(x: 14.024, y: 11.047))
        p.addCurve(to: CGPoint(x: 11.84, y: 12.649), control1: CGPoint(x: 13.047, y: 12.024), control2: CGPoint(x: 12.482, y: 12.395))
        p.addCurve(to: CGPoint(x: 10, y: 13), control1: CGPoint(x: 11.249, y: 12.883), control2: CGPoint(x: 10.636, y: 13))
        p.addLine(to: CGPoint(x: 6, y: 13))
        p.addCurve(to: CGPoint(x: 4.16, y: 12.649), control1: CGPoint(x: 5.364, y: 13), control2: CGPoint(x: 4.751, y: 12.883))
        p.addCurve(to: CGPoint(x: 2.464, y: 11.536), control1: CGPoint(x: 3.518, y: 12.395), control2: CGPoint(x: 2.953, y: 12.024))
        p.closeSubpath()
        p.move(to: CGPoint(x: 11.472, y: 11.719))
        p.addCurve(to: CGPoint(x: 12.828, y: 10.828), control1: CGPoint(x: 11.986, y: 11.516), control2: CGPoint(x: 12.438, y: 11.219))
        p.addCurve(to: CGPoint(x: 13.719, y: 9.472), control1: CGPoint(x: 13.219, y: 10.438), control2: CGPoint(x: 13.516, y: 9.986))
        p.addCurve(to: CGPoint(x: 14, y: 8), control1: CGPoint(x: 13.906, y: 8.999), control2: CGPoint(x: 14, y: 8.509))
        p.addCurve(to: CGPoint(x: 13.719, y: 6.528), control1: CGPoint(x: 14, y: 7.491), control2: CGPoint(x: 13.906, y: 7.001))
        p.addCurve(to: CGPoint(x: 12.828, y: 5.172), control1: CGPoint(x: 13.516, y: 6.014), control2: CGPoint(x: 13.219, y: 5.562))
        p.addCurve(to: CGPoint(x: 11.472, y: 4.281), control1: CGPoint(x: 12.438, y: 4.781), control2: CGPoint(x: 11.986, y: 4.484))
        p.addCurve(to: CGPoint(x: 10, y: 4), control1: CGPoint(x: 10.999, y: 4.094), control2: CGPoint(x: 10.509, y: 4))
        p.addLine(to: CGPoint(x: 6, y: 4))
        p.addCurve(to: CGPoint(x: 4.528, y: 4.281), control1: CGPoint(x: 5.491, y: 4), control2: CGPoint(x: 5.001, y: 4.094))
        p.addCurve(to: CGPoint(x: 3.172, y: 5.172), control1: CGPoint(x: 4.014, y: 4.484), control2: CGPoint(x: 3.562, y: 4.781))
        p.addCurve(to: CGPoint(x: 2.281, y: 6.528), control1: CGPoint(x: 2.781, y: 5.562), control2: CGPoint(x: 2.484, y: 6.014))
        p.addCurve(to: CGPoint(x: 2, y: 8), control1: CGPoint(x: 2.094, y: 7.001), control2: CGPoint(x: 2, y: 7.491))
        p.addCurve(to: CGPoint(x: 2.281, y: 9.472), control1: CGPoint(x: 2, y: 8.509), control2: CGPoint(x: 2.094, y: 8.999))
        p.addCurve(to: CGPoint(x: 3.172, y: 10.828), control1: CGPoint(x: 2.484, y: 9.986), control2: CGPoint(x: 2.781, y: 10.438))
        p.addCurve(to: CGPoint(x: 4.528, y: 11.719), control1: CGPoint(x: 3.562, y: 11.219), control2: CGPoint(x: 4.014, y: 11.516))
        p.addCurve(to: CGPoint(x: 6, y: 12), control1: CGPoint(x: 5.001, y: 11.906), control2: CGPoint(x: 5.491, y: 12))
        p.addLine(to: CGPoint(x: 10, y: 12))
        p.addCurve(to: CGPoint(x: 11.472, y: 11.719), control1: CGPoint(x: 10.509, y: 12), control2: CGPoint(x: 10.999, y: 11.906))
        p.closeSubpath()
        p.move(to: CGPoint(x: 4.14, y: 7.264))
        p.addCurve(to: CGPoint(x: 4.586, y: 6.586), control1: CGPoint(x: 4.242, y: 7.007), control2: CGPoint(x: 4.391, y: 6.781))
        p.addCurve(to: CGPoint(x: 5.264, y: 6.14), control1: CGPoint(x: 4.781, y: 6.391), control2: CGPoint(x: 5.007, y: 6.242))
        p.addCurve(to: CGPoint(x: 6, y: 6), control1: CGPoint(x: 5.5, y: 6.047), control2: CGPoint(x: 5.746, y: 6))
        p.addCurve(to: CGPoint(x: 6.736, y: 6.14), control1: CGPoint(x: 6.254, y: 6), control2: CGPoint(x: 6.5, y: 6.047))
        p.addCurve(to: CGPoint(x: 7.414, y: 6.586), control1: CGPoint(x: 6.993, y: 6.242), control2: CGPoint(x: 7.219, y: 6.391))
        p.addCurve(to: CGPoint(x: 7.86, y: 7.264), control1: CGPoint(x: 7.609, y: 6.781), control2: CGPoint(x: 7.758, y: 7.007))
        p.addCurve(to: CGPoint(x: 8, y: 8), control1: CGPoint(x: 7.953, y: 7.5), control2: CGPoint(x: 8, y: 7.746))
        p.addCurve(to: CGPoint(x: 7.86, y: 8.736), control1: CGPoint(x: 8, y: 8.254), control2: CGPoint(x: 7.953, y: 8.5))
        p.addCurve(to: CGPoint(x: 7.414, y: 9.414), control1: CGPoint(x: 7.758, y: 8.993), control2: CGPoint(x: 7.609, y: 9.219))
        p.addCurve(to: CGPoint(x: 6.736, y: 9.86), control1: CGPoint(x: 7.219, y: 9.609), control2: CGPoint(x: 6.993, y: 9.758))
        p.addCurve(to: CGPoint(x: 6, y: 10), control1: CGPoint(x: 6.5, y: 9.953), control2: CGPoint(x: 6.254, y: 10))
        p.addCurve(to: CGPoint(x: 5.264, y: 9.86), control1: CGPoint(x: 5.746, y: 10), control2: CGPoint(x: 5.5, y: 9.953))
        p.addCurve(to: CGPoint(x: 4.586, y: 9.414), control1: CGPoint(x: 5.007, y: 9.758), control2: CGPoint(x: 4.781, y: 9.609))
        p.addCurve(to: CGPoint(x: 4.14, y: 8.736), control1: CGPoint(x: 4.391, y: 9.219), control2: CGPoint(x: 4.242, y: 8.993))
        p.addCurve(to: CGPoint(x: 4, y: 8), control1: CGPoint(x: 4.047, y: 8.5), control2: CGPoint(x: 4, y: 8.254))
        p.addCurve(to: CGPoint(x: 4.14, y: 7.264), control1: CGPoint(x: 4, y: 7.746), control2: CGPoint(x: 4.047, y: 7.5))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// ToggleOffIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val ToggleOffIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "toggle-off", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("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"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(ToggleOffIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_toggle_off.xml · Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="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"/>
</vector>
```

### Flutter

```dart
// Gentleface "toggle-off" (line-round), MIT. https://gentleface.com/icons/toggle-off
import 'package:flutter/widgets.dart';

class ToggleOffIcon extends StatelessWidget {
  const ToggleOffIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _ToggleOffIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _ToggleOffIconPainter extends CustomPainter {
  _ToggleOffIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(2.464, 11.536)
      ..cubicTo(1.976, 11.047, 1.605, 10.482, 1.351, 9.84)
      ..cubicTo(1.117, 9.249, 1, 8.636, 1, 8)
      ..cubicTo(1, 7.364, 1.117, 6.751, 1.351, 6.16)
      ..cubicTo(1.605, 5.518, 1.976, 4.953, 2.464, 4.464)
      ..cubicTo(2.953, 3.976, 3.518, 3.605, 4.16, 3.351)
      ..cubicTo(4.751, 3.117, 5.364, 3, 6, 3)
      ..lineTo(10, 3)
      ..cubicTo(10.636, 3, 11.249, 3.117, 11.84, 3.351)
      ..cubicTo(12.482, 3.605, 13.047, 3.976, 13.536, 4.464)
      ..cubicTo(14.024, 4.953, 14.395, 5.518, 14.649, 6.16)
      ..cubicTo(14.883, 6.751, 15, 7.364, 15, 8)
      ..cubicTo(15, 8.636, 14.883, 9.249, 14.649, 9.84)
      ..cubicTo(14.395, 10.482, 14.024, 11.047, 13.536, 11.536)
      ..cubicTo(13.047, 12.024, 12.482, 12.395, 11.84, 12.649)
      ..cubicTo(11.249, 12.883, 10.636, 13, 10, 13)
      ..lineTo(6, 13)
      ..cubicTo(5.364, 13, 4.751, 12.883, 4.16, 12.649)
      ..cubicTo(3.518, 12.395, 2.953, 12.024, 2.464, 11.536)
      ..close()
      ..moveTo(11.472, 11.719)
      ..cubicTo(11.986, 11.516, 12.438, 11.219, 12.828, 10.828)
      ..cubicTo(13.219, 10.438, 13.516, 9.986, 13.719, 9.472)
      ..cubicTo(13.906, 8.999, 14, 8.509, 14, 8)
      ..cubicTo(14, 7.491, 13.906, 7.001, 13.719, 6.528)
      ..cubicTo(13.516, 6.014, 13.219, 5.562, 12.828, 5.172)
      ..cubicTo(12.438, 4.781, 11.986, 4.484, 11.472, 4.281)
      ..cubicTo(10.999, 4.094, 10.509, 4, 10, 4)
      ..lineTo(6, 4)
      ..cubicTo(5.491, 4, 5.001, 4.094, 4.528, 4.281)
      ..cubicTo(4.014, 4.484, 3.562, 4.781, 3.172, 5.172)
      ..cubicTo(2.781, 5.562, 2.484, 6.014, 2.281, 6.528)
      ..cubicTo(2.094, 7.001, 2, 7.491, 2, 8)
      ..cubicTo(2, 8.509, 2.094, 8.999, 2.281, 9.472)
      ..cubicTo(2.484, 9.986, 2.781, 10.438, 3.172, 10.828)
      ..cubicTo(3.562, 11.219, 4.014, 11.516, 4.528, 11.719)
      ..cubicTo(5.001, 11.906, 5.491, 12, 6, 12)
      ..lineTo(10, 12)
      ..cubicTo(10.509, 12, 10.999, 11.906, 11.472, 11.719)
      ..close()
      ..moveTo(4.14, 7.264)
      ..cubicTo(4.242, 7.007, 4.391, 6.781, 4.586, 6.586)
      ..cubicTo(4.781, 6.391, 5.007, 6.242, 5.264, 6.14)
      ..cubicTo(5.5, 6.047, 5.746, 6, 6, 6)
      ..cubicTo(6.254, 6, 6.5, 6.047, 6.736, 6.14)
      ..cubicTo(6.993, 6.242, 7.219, 6.391, 7.414, 6.586)
      ..cubicTo(7.609, 6.781, 7.758, 7.007, 7.86, 7.264)
      ..cubicTo(7.953, 7.5, 8, 7.746, 8, 8)
      ..cubicTo(8, 8.254, 7.953, 8.5, 7.86, 8.736)
      ..cubicTo(7.758, 8.993, 7.609, 9.219, 7.414, 9.414)
      ..cubicTo(7.219, 9.609, 6.993, 9.758, 6.736, 9.86)
      ..cubicTo(6.5, 9.953, 6.254, 10, 6, 10)
      ..cubicTo(5.746, 10, 5.5, 9.953, 5.264, 9.86)
      ..cubicTo(5.007, 9.758, 4.781, 9.609, 4.586, 9.414)
      ..cubicTo(4.391, 9.219, 4.242, 8.993, 4.14, 8.736)
      ..cubicTo(4.047, 8.5, 4, 8.254, 4, 8)
      ..cubicTo(4, 7.746, 4.047, 7.5, 4.14, 7.264)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_ToggleOffIconPainter old) => old.color != color;
}
```