toggle off icon
toggle-off from Line Awesome by Icons8 · Line · Status · Apache-2.0 Free for personal and commercial use.
- Name
- toggle-off
- Set
- Line Awesome
- Style
- Line
- Category
- Status
- Viewbox
- 32×32
- License
- Apache 2.0
- Aliases
- toggle-off-solid
The same icon in other sets
More status icons from Line Awesome
banbattery-emptybattery-fullbattery-halfbattery-quarterbattery-three-quartersbellbell-slashbell-slash-solidbell-solidcalendarcalendar-altcalendar-alt-solidcalendar-checkcalendar-check-solidcalendar-daycalendar-minuscalendar-minus-solidcalendar-pluscalendar-plus-solidcalendar-solidcalendar-timescalendar-times-solidcalendar-week
Use the toggle off icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-.621 0-1.227.066-1.813.188a9 9 0 0 0-.875.218A9.07 9.07 0 0 0 .72 12.5c-.114.27-.227.531-.313.813A8.9 8.9 0 0 0 0 16c0 .93.145 1.813.406 2.656c.004.008-.004.024 0 .032A9.07 9.07 0 0 0 5.5 24.28c.27.114.531.227.813.313A8.8 8.8 0 0 0 9 24.999h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm0 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7q-.002-.365.031-.719A6.985 6.985 0 0 1 9 9m5.625 0H23c3.879 0 7 3.121 7 7s-3.121 7-7 7h-8.375C16.675 21.348 18 18.828 18 16s-1.324-5.348-3.375-7"/></svg>
React
import type { SVGProps } from "react";
export function LaToggleOff(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-.621 0-1.227.066-1.813.188a9 9 0 0 0-.875.218A9.07 9.07 0 0 0 .72 12.5c-.114.27-.227.531-.313.813A8.9 8.9 0 0 0 0 16c0 .93.145 1.813.406 2.656c.004.008-.004.024 0 .032A9.07 9.07 0 0 0 5.5 24.28c.27.114.531.227.813.313A8.8 8.8 0 0 0 9 24.999h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm0 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7q-.002-.365.031-.719A6.985 6.985 0 0 1 9 9m5.625 0H23c3.879 0 7 3.121 7 7s-3.121 7-7 7h-8.375C16.675 21.348 18 18.828 18 16s-1.324-5.348-3.375-7"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-.621 0-1.227.066-1.813.188a9 9 0 0 0-.875.218A9.07 9.07 0 0 0 .72 12.5c-.114.27-.227.531-.313.813A8.9 8.9 0 0 0 0 16c0 .93.145 1.813.406 2.656c.004.008-.004.024 0 .032A9.07 9.07 0 0 0 5.5 24.28c.27.114.531.227.813.313A8.8 8.8 0 0 0 9 24.999h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm0 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7q-.002-.365.031-.719A6.985 6.985 0 0 1 9 9m5.625 0H23c3.879 0 7 3.121 7 7s-3.121 7-7 7h-8.375C16.675 21.348 18 18.828 18 16s-1.324-5.348-3.375-7"/></svg> </template>
CSS
.icon-toggle-off {
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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%207c-.621%200-1.227.066-1.813.188a9%209%200%200%200-.875.218A9.07%209.07%200%200%200%20.72%2012.5c-.114.27-.227.531-.313.813A8.9%208.9%200%200%200%200%2016c0%20.93.145%201.813.406%202.656c.004.008-.004.024%200%20.032A9.07%209.07%200%200%200%205.5%2024.28c.27.114.531.227.813.313A8.8%208.8%200%200%200%209%2024.999h14c4.957%200%209-4.043%209-9s-4.043-9-9-9zm0%202c3.879%200%207%203.121%207%207s-3.121%207-7%207s-7-3.121-7-7q-.002-.365.031-.719A6.985%206.985%200%200%201%209%209m5.625%200H23c3.879%200%207%203.121%207%207s-3.121%207-7%207h-8.375C16.675%2021.348%2018%2018.828%2018%2016s-1.324-5.348-3.375-7%22%2F%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%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M9%207c-.621%200-1.227.066-1.813.188a9%209%200%200%200-.875.218A9.07%209.07%200%200%200%20.72%2012.5c-.114.27-.227.531-.313.813A8.9%208.9%200%200%200%200%2016c0%20.93.145%201.813.406%202.656c.004.008-.004.024%200%20.032A9.07%209.07%200%200%200%205.5%2024.28c.27.114.531.227.813.313A8.8%208.8%200%200%200%209%2024.999h14c4.957%200%209-4.043%209-9s-4.043-9-9-9zm0%202c3.879%200%207%203.121%207%207s-3.121%207-7%207s-7-3.121-7-7q-.002-.365.031-.719A6.985%206.985%200%200%201%209%209m5.625%200H23c3.879%200%207%203.121%207%207s-3.121%207-7%207h-8.375C16.675%2021.348%2018%2018.828%2018%2016s-1.324-5.348-3.375-7%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/toggle-off.svg?color=%231a73e8&size=48
