widget 3 icon

widget-3-broken from Solar by 480 Design · Broken · Settings · CC-BY-4.0 Attribution required.

Name
widget-3-broken
Set
Solar
Style
Broken
Category
Settings
Viewbox
24×24
License
CC BY 4.0

5 other variants in Solar

More settings icons from Solar

Use the widget 3 icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.5 6.5C21.5 4.29086 19.7091 2.5 17.5 2.5C15.2909 2.5 13.5 4.29086 13.5 6.5C13.5 8.70914 15.2909 10.5 17.5 10.5C19.7091 10.5 21.5 8.70914 21.5 6.5Z"/><path d="M10.5 17.5C10.5 15.2909 8.70914 13.5 6.5 13.5C4.29086 13.5 2.5 15.2909 2.5 17.5C2.5 19.7091 4.29086 21.5 6.5 21.5C8.70914 21.5 10.5 19.7091 10.5 17.5Z"/><path stroke-linecap="round" d="M2.66789 5.34961C2.55868 5.71394 2.5 6.10012 2.5 6.5C2.5 8.70914 4.29086 10.5 6.5 10.5C8.70914 10.5 10.5 8.70914 10.5 6.5C10.5 4.29086 8.70914 2.5 6.5 2.5C6.10012 2.5 5.71394 2.55868 5.34961 2.66789"/><path stroke-linecap="round" d="M21.8321 19.1504C21.9413 18.7861 22 18.3999 22 18C22 15.7909 20.2091 14 18 14C15.7909 14 14 15.7909 14 18C14 20.2091 15.7909 22 18 22C18.3999 22 18.7861 21.9413 19.1504 21.8321"/></g></svg>

React

import type { SVGProps } from "react";

export function SolarWidget3Broken(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M21.5 6.5C21.5 4.29086 19.7091 2.5 17.5 2.5C15.2909 2.5 13.5 4.29086 13.5 6.5C13.5 8.70914 15.2909 10.5 17.5 10.5C19.7091 10.5 21.5 8.70914 21.5 6.5Z"/><path d="M10.5 17.5C10.5 15.2909 8.70914 13.5 6.5 13.5C4.29086 13.5 2.5 15.2909 2.5 17.5C2.5 19.7091 4.29086 21.5 6.5 21.5C8.70914 21.5 10.5 19.7091 10.5 17.5Z"/><path strokeLinecap="round" d="M2.66789 5.34961C2.55868 5.71394 2.5 6.10012 2.5 6.5C2.5 8.70914 4.29086 10.5 6.5 10.5C8.70914 10.5 10.5 8.70914 10.5 6.5C10.5 4.29086 8.70914 2.5 6.5 2.5C6.10012 2.5 5.71394 2.55868 5.34961 2.66789"/><path strokeLinecap="round" d="M21.8321 19.1504C21.9413 18.7861 22 18.3999 22 18C22 15.7909 20.2091 14 18 14C15.7909 14 14 15.7909 14 18C14 20.2091 15.7909 22 18 22C18.3999 22 18.7861 21.9413 19.1504 21.8321"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21.5 6.5C21.5 4.29086 19.7091 2.5 17.5 2.5C15.2909 2.5 13.5 4.29086 13.5 6.5C13.5 8.70914 15.2909 10.5 17.5 10.5C19.7091 10.5 21.5 8.70914 21.5 6.5Z"/><path d="M10.5 17.5C10.5 15.2909 8.70914 13.5 6.5 13.5C4.29086 13.5 2.5 15.2909 2.5 17.5C2.5 19.7091 4.29086 21.5 6.5 21.5C8.70914 21.5 10.5 19.7091 10.5 17.5Z"/><path stroke-linecap="round" d="M2.66789 5.34961C2.55868 5.71394 2.5 6.10012 2.5 6.5C2.5 8.70914 4.29086 10.5 6.5 10.5C8.70914 10.5 10.5 8.70914 10.5 6.5C10.5 4.29086 8.70914 2.5 6.5 2.5C6.10012 2.5 5.71394 2.55868 5.34961 2.66789"/><path stroke-linecap="round" d="M21.8321 19.1504C21.9413 18.7861 22 18.3999 22 18C22 15.7909 20.2091 14 18 14C15.7909 14 14 15.7909 14 18C14 20.2091 15.7909 22 18 22C18.3999 22 18.7861 21.9413 19.1504 21.8321"/></g></svg>
</template>

CSS

.icon-widget-3-broken {
  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%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M21.5%206.5C21.5%204.29086%2019.7091%202.5%2017.5%202.5C15.2909%202.5%2013.5%204.29086%2013.5%206.5C13.5%208.70914%2015.2909%2010.5%2017.5%2010.5C19.7091%2010.5%2021.5%208.70914%2021.5%206.5Z%22%2F%3E%3Cpath%20d%3D%22M10.5%2017.5C10.5%2015.2909%208.70914%2013.5%206.5%2013.5C4.29086%2013.5%202.5%2015.2909%202.5%2017.5C2.5%2019.7091%204.29086%2021.5%206.5%2021.5C8.70914%2021.5%2010.5%2019.7091%2010.5%2017.5Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M2.66789%205.34961C2.55868%205.71394%202.5%206.10012%202.5%206.5C2.5%208.70914%204.29086%2010.5%206.5%2010.5C8.70914%2010.5%2010.5%208.70914%2010.5%206.5C10.5%204.29086%208.70914%202.5%206.5%202.5C6.10012%202.5%205.71394%202.55868%205.34961%202.66789%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M21.8321%2019.1504C21.9413%2018.7861%2022%2018.3999%2022%2018C22%2015.7909%2020.2091%2014%2018%2014C15.7909%2014%2014%2015.7909%2014%2018C14%2020.2091%2015.7909%2022%2018%2022C18.3999%2022%2018.7861%2021.9413%2019.1504%2021.8321%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%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M21.5%206.5C21.5%204.29086%2019.7091%202.5%2017.5%202.5C15.2909%202.5%2013.5%204.29086%2013.5%206.5C13.5%208.70914%2015.2909%2010.5%2017.5%2010.5C19.7091%2010.5%2021.5%208.70914%2021.5%206.5Z%22%2F%3E%3Cpath%20d%3D%22M10.5%2017.5C10.5%2015.2909%208.70914%2013.5%206.5%2013.5C4.29086%2013.5%202.5%2015.2909%202.5%2017.5C2.5%2019.7091%204.29086%2021.5%206.5%2021.5C8.70914%2021.5%2010.5%2019.7091%2010.5%2017.5Z%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M2.66789%205.34961C2.55868%205.71394%202.5%206.10012%202.5%206.5C2.5%208.70914%204.29086%2010.5%206.5%2010.5C8.70914%2010.5%2010.5%208.70914%2010.5%206.5C10.5%204.29086%208.70914%202.5%206.5%202.5C6.10012%202.5%205.71394%202.55868%205.34961%202.66789%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M21.8321%2019.1504C21.9413%2018.7861%2022%2018.3999%2022%2018C22%2015.7909%2020.2091%2014%2018%2014C15.7909%2014%2014%2015.7909%2014%2018C14%2020.2091%2015.7909%2022%2018%2022C18.3999%2022%2018.7861%2021.9413%2019.1504%2021.8321%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/solar/widget-3-broken.svg?color=%231a73e8&size=48