toggles icon

toggles-duotone from Keyline Icons by Keyline Icons · Duotone · MIT Free for personal and commercial use.

Name: toggles-duotone
Set: Keyline Icons
Style: Duotone
Viewbox: 24×24
License: MIT

7 other variants in Keyline Icons

toggles toggles-fill toggles-sharp toggles-sharp-duotone toggles-sharp-fill toggles-sharp-two-tone toggles-two-tone

The same icon in other sets

Use the toggles icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path fill-opacity=".4" d="M11 6C11 7.6569 9.6569 9 8 9C6.3431 9 5 7.6569 5 6C5 4.3431 6.3431 3 8 3C9.6569 3 11 4.3431 11 6ZM19 18C19 19.6569 17.6569 21 16 21C14.3431 21 13 19.6569 13 18C13 16.3431 14.3431 15 16 15C17.6569 15 19 16.3431 19 18Z"/><path fill-rule="evenodd" d="M8 1L16 1C18.7614 1 21 3.2386 21 6C21 8.7614 18.7614 11 16 11L8 11C5.2386 11 3 8.7614 3 6C3 3.2386 5.2386 1 8 1ZM8 13L16 13C18.7614 13 21 15.2386 21 18C21 20.7614 18.7614 23 16 23L8 23C5.2386 23 3 20.7614 3 18C3 15.2386 5.2386 13 8 13ZM11 6C11 4.3431 9.6569 3 8 3C6.3431 3 5 4.3431 5 6C5 7.6569 6.3431 9 8 9C9.6569 9 11 7.6569 11 6ZM19 18C19 16.3431 17.6569 15 16 15C14.3431 15 13 16.3431 13 18C13 19.6569 14.3431 21 16 21C17.6569 21 19 19.6569 19 18Z" clip-rule="evenodd"/></g></svg>

React

import type { SVGProps } from "react";

export function KeylineIconsTogglesDuotone(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path fillOpacity=".4" d="M11 6C11 7.6569 9.6569 9 8 9C6.3431 9 5 7.6569 5 6C5 4.3431 6.3431 3 8 3C9.6569 3 11 4.3431 11 6ZM19 18C19 19.6569 17.6569 21 16 21C14.3431 21 13 19.6569 13 18C13 16.3431 14.3431 15 16 15C17.6569 15 19 16.3431 19 18Z"/><path fillRule="evenodd" d="M8 1L16 1C18.7614 1 21 3.2386 21 6C21 8.7614 18.7614 11 16 11L8 11C5.2386 11 3 8.7614 3 6C3 3.2386 5.2386 1 8 1ZM8 13L16 13C18.7614 13 21 15.2386 21 18C21 20.7614 18.7614 23 16 23L8 23C5.2386 23 3 20.7614 3 18C3 15.2386 5.2386 13 8 13ZM11 6C11 4.3431 9.6569 3 8 3C6.3431 3 5 4.3431 5 6C5 7.6569 6.3431 9 8 9C9.6569 9 11 7.6569 11 6ZM19 18C19 16.3431 17.6569 15 16 15C14.3431 15 13 16.3431 13 18C13 19.6569 14.3431 21 16 21C17.6569 21 19 19.6569 19 18Z" clipRule="evenodd"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="currentColor"><path fill-opacity=".4" d="M11 6C11 7.6569 9.6569 9 8 9C6.3431 9 5 7.6569 5 6C5 4.3431 6.3431 3 8 3C9.6569 3 11 4.3431 11 6ZM19 18C19 19.6569 17.6569 21 16 21C14.3431 21 13 19.6569 13 18C13 16.3431 14.3431 15 16 15C17.6569 15 19 16.3431 19 18Z"/><path fill-rule="evenodd" d="M8 1L16 1C18.7614 1 21 3.2386 21 6C21 8.7614 18.7614 11 16 11L8 11C5.2386 11 3 8.7614 3 6C3 3.2386 5.2386 1 8 1ZM8 13L16 13C18.7614 13 21 15.2386 21 18C21 20.7614 18.7614 23 16 23L8 23C5.2386 23 3 20.7614 3 18C3 15.2386 5.2386 13 8 13ZM11 6C11 4.3431 9.6569 3 8 3C6.3431 3 5 4.3431 5 6C5 7.6569 6.3431 9 8 9C9.6569 9 11 7.6569 11 6ZM19 18C19 16.3431 17.6569 15 16 15C14.3431 15 13 16.3431 13 18C13 19.6569 14.3431 21 16 21C17.6569 21 19 19.6569 19 18Z" clip-rule="evenodd"/></g></svg>
</template>

CSS

.icon-toggles-duotone {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20fill-opacity%3D%22.4%22%20d%3D%22M11%206C11%207.6569%209.6569%209%208%209C6.3431%209%205%207.6569%205%206C5%204.3431%206.3431%203%208%203C9.6569%203%2011%204.3431%2011%206ZM19%2018C19%2019.6569%2017.6569%2021%2016%2021C14.3431%2021%2013%2019.6569%2013%2018C13%2016.3431%2014.3431%2015%2016%2015C17.6569%2015%2019%2016.3431%2019%2018Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8%201L16%201C18.7614%201%2021%203.2386%2021%206C21%208.7614%2018.7614%2011%2016%2011L8%2011C5.2386%2011%203%208.7614%203%206C3%203.2386%205.2386%201%208%201ZM8%2013L16%2013C18.7614%2013%2021%2015.2386%2021%2018C21%2020.7614%2018.7614%2023%2016%2023L8%2023C5.2386%2023%203%2020.7614%203%2018C3%2015.2386%205.2386%2013%208%2013ZM11%206C11%204.3431%209.6569%203%208%203C6.3431%203%205%204.3431%205%206C5%207.6569%206.3431%209%208%209C9.6569%209%2011%207.6569%2011%206ZM19%2018C19%2016.3431%2017.6569%2015%2016%2015C14.3431%2015%2013%2016.3431%2013%2018C13%2019.6569%2014.3431%2021%2016%2021C17.6569%2021%2019%2019.6569%2019%2018Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22currentColor%22%3E%3Cpath%20fill-opacity%3D%22.4%22%20d%3D%22M11%206C11%207.6569%209.6569%209%208%209C6.3431%209%205%207.6569%205%206C5%204.3431%206.3431%203%208%203C9.6569%203%2011%204.3431%2011%206ZM19%2018C19%2019.6569%2017.6569%2021%2016%2021C14.3431%2021%2013%2019.6569%2013%2018C13%2016.3431%2014.3431%2015%2016%2015C17.6569%2015%2019%2016.3431%2019%2018Z%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M8%201L16%201C18.7614%201%2021%203.2386%2021%206C21%208.7614%2018.7614%2011%2016%2011L8%2011C5.2386%2011%203%208.7614%203%206C3%203.2386%205.2386%201%208%201ZM8%2013L16%2013C18.7614%2013%2021%2015.2386%2021%2018C21%2020.7614%2018.7614%2023%2016%2023L8%2023C5.2386%2023%203%2020.7614%203%2018C3%2015.2386%205.2386%2013%208%2013ZM11%206C11%204.3431%209.6569%203%208%203C6.3431%203%205%204.3431%205%206C5%207.6569%206.3431%209%208%209C9.6569%209%2011%207.6569%2011%206ZM19%2018C19%2016.3431%2017.6569%2015%2016%2015C14.3431%2015%2013%2016.3431%2013%2018C13%2019.6569%2014.3431%2021%2016%2021C17.6569%2021%2019%2019.6569%2019%2018Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/keyline-icons/toggles-duotone.svg?color=%231a73e8&size=48