# toggle icon

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

- Category: Layout & interface
- Use it for: toggle, toggle on, enabled, switch on, toggle switch
- Tags: toggle, switch, on, enabled, setting, option, active
- 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-off, window
- Component name: ToggleIcon
- Added: 2026-10-14

## Alternatives

- `toggle-off`: the off state (toggle-off)
- `checkbox`: a check box in a form (checkbox)

## Don't confuse with

- `arrow-left-right`: arrow-left-right owns switch as in swap (swap), not on/off

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

## 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.svg · PNG https://gentleface.com/png/line-round/16/toggle.png · https://gentleface.com/png/line-round/32/toggle.png · https://gentleface.com/png/line-round/48/toggle.png
- line-soft: https://gentleface.com/svg/line-soft/16/toggle.svg · PNG https://gentleface.com/png/line-soft/16/toggle.png · https://gentleface.com/png/line-soft/32/toggle.png · https://gentleface.com/png/line-soft/48/toggle.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/toggle.svg · PNG https://gentleface.com/png/line-sharp/16/toggle.png · https://gentleface.com/png/line-sharp/32/toggle.png · https://gentleface.com/png/line-sharp/48/toggle.png
- solid-round: https://gentleface.com/svg/solid-round/16/toggle.svg · PNG https://gentleface.com/png/solid-round/16/toggle.png · https://gentleface.com/png/solid-round/32/toggle.png · https://gentleface.com/png/solid-round/48/toggle.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/toggle.svg · PNG https://gentleface.com/png/solid-soft/16/toggle.png · https://gentleface.com/png/solid-soft/32/toggle.png · https://gentleface.com/png/solid-soft/48/toggle.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/toggle.svg · PNG https://gentleface.com/png/solid-sharp/16/toggle.png · https://gentleface.com/png/solid-sharp/32/toggle.png · https://gentleface.com/png/solid-sharp/48/toggle.png

The SVG of every style: https://gentleface.com/icons/toggle.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="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

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

### Svelte

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

### HTML img

```html
<!-- Gentleface "toggle" (line-round), MIT. https://gentleface.com/icons/toggle. 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.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "toggle" (line-round), MIT. https://gentleface.com/icons/toggle. Takes the text color. */
.icon-toggle {
  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='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'/%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='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'/%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='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'/%3E%3C/svg%3E
```

### Sprite

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

### SwiftUI

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

struct ToggleIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 11.84, y: 3.351))
        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.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.closeSubpath()
        p.move(to: CGPoint(x: 10, y: 6))
        p.addCurve(to: CGPoint(x: 8, y: 8), control1: CGPoint(x: 8.895, y: 6), control2: CGPoint(x: 8, y: 6.895))
        p.addCurve(to: CGPoint(x: 10, y: 10), control1: CGPoint(x: 8, y: 9.105), control2: CGPoint(x: 8.895, y: 10))
        p.addCurve(to: CGPoint(x: 12, y: 8), control1: CGPoint(x: 11.105, y: 10), control2: CGPoint(x: 12, y: 9.105))
        p.addCurve(to: CGPoint(x: 10, y: 6), control1: CGPoint(x: 12, y: 6.895), control2: CGPoint(x: 11.105, y: 6))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

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

### Compose

```kotlin
// Gentleface "toggle" (line-round), MIT. https://gentleface.com/icons/toggle
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 ToggleIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "toggle", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("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"),
        fill = SolidColor(Color.Black),
    ).build()
}

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

### Android XML

```xml
<!-- res/drawable/ic_toggle.xml · Gentleface "toggle" (line-round), MIT. https://gentleface.com/icons/toggle -->
<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="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"/>
</vector>
```

### Flutter

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

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

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

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

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(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)
      ..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)
      ..close()
      ..moveTo(10, 6)
      ..cubicTo(8.895, 6, 8, 6.895, 8, 8)
      ..cubicTo(8, 9.105, 8.895, 10, 10, 10)
      ..cubicTo(11.105, 10, 12, 9.105, 12, 8)
      ..cubicTo(12, 6.895, 11.105, 6, 10, 6)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

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