shapes 01 icon

shapes-01 from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name
shapes-01
Set
Huge Icons
Style
Stroke
Viewbox
24×24
License
MIT

Use the shapes 01 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-linejoin="round" stroke-width="1.5"><path stroke-linecap="round" d="M13.338 10h-2.676c-1.535 0-2.302 0-2.577-.507s.132-1.173.946-2.504l1.338-2.191C11.1 3.599 11.467 3 12 3s.899.6 1.631 1.798l1.338 2.19c.814 1.332 1.22 1.998.946 2.505c-.275.507-1.042.507-2.577.507"/><circle cx="17.5" cy="17.5" r="3.5"/><path stroke-linecap="round" d="M9.663 20.111C10 19.607 10 18.904 10 17.5s0-2.107-.337-2.611a2 2 0 0 0-.552-.552C8.607 14 7.904 14 6.5 14s-2.107 0-2.611.337a2 2 0 0 0-.552.552C3 15.393 3 16.096 3 17.5s0 2.107.337 2.611a2 2 0 0 0 .552.552C4.393 21 5.096 21 6.5 21s2.107 0 2.611-.337a2 2 0 0 0 .552-.552"/></g></svg>

React

import type { SVGProps } from "react";

export function HugeiconsShapes01(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" strokeLinejoin="round" strokeWidth="1.5"><path strokeLinecap="round" d="M13.338 10h-2.676c-1.535 0-2.302 0-2.577-.507s.132-1.173.946-2.504l1.338-2.191C11.1 3.599 11.467 3 12 3s.899.6 1.631 1.798l1.338 2.19c.814 1.332 1.22 1.998.946 2.505c-.275.507-1.042.507-2.577.507"/><circle cx="17.5" cy="17.5" r="3.5"/><path strokeLinecap="round" d="M9.663 20.111C10 19.607 10 18.904 10 17.5s0-2.107-.337-2.611a2 2 0 0 0-.552-.552C8.607 14 7.904 14 6.5 14s-2.107 0-2.611.337a2 2 0 0 0-.552.552C3 15.393 3 16.096 3 17.5s0 2.107.337 2.611a2 2 0 0 0 .552.552C4.393 21 5.096 21 6.5 21s2.107 0 2.611-.337a2 2 0 0 0 .552-.552"/></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-linejoin="round" stroke-width="1.5"><path stroke-linecap="round" d="M13.338 10h-2.676c-1.535 0-2.302 0-2.577-.507s.132-1.173.946-2.504l1.338-2.191C11.1 3.599 11.467 3 12 3s.899.6 1.631 1.798l1.338 2.19c.814 1.332 1.22 1.998.946 2.505c-.275.507-1.042.507-2.577.507"/><circle cx="17.5" cy="17.5" r="3.5"/><path stroke-linecap="round" d="M9.663 20.111C10 19.607 10 18.904 10 17.5s0-2.107-.337-2.611a2 2 0 0 0-.552-.552C8.607 14 7.904 14 6.5 14s-2.107 0-2.611.337a2 2 0 0 0-.552.552C3 15.393 3 16.096 3 17.5s0 2.107.337 2.611a2 2 0 0 0 .552.552C4.393 21 5.096 21 6.5 21s2.107 0 2.611-.337a2 2 0 0 0 .552-.552"/></g></svg>
</template>

CSS

.icon-shapes-01 {
  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-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M13.338%2010h-2.676c-1.535%200-2.302%200-2.577-.507s.132-1.173.946-2.504l1.338-2.191C11.1%203.599%2011.467%203%2012%203s.899.6%201.631%201.798l1.338%202.19c.814%201.332%201.22%201.998.946%202.505c-.275.507-1.042.507-2.577.507%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M9.663%2020.111C10%2019.607%2010%2018.904%2010%2017.5s0-2.107-.337-2.611a2%202%200%200%200-.552-.552C8.607%2014%207.904%2014%206.5%2014s-2.107%200-2.611.337a2%202%200%200%200-.552.552C3%2015.393%203%2016.096%203%2017.5s0%202.107.337%202.611a2%202%200%200%200%20.552.552C4.393%2021%205.096%2021%206.5%2021s2.107%200%202.611-.337a2%202%200%200%200%20.552-.552%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-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M13.338%2010h-2.676c-1.535%200-2.302%200-2.577-.507s.132-1.173.946-2.504l1.338-2.191C11.1%203.599%2011.467%203%2012%203s.899.6%201.631%201.798l1.338%202.19c.814%201.332%201.22%201.998.946%202.505c-.275.507-1.042.507-2.577.507%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%223.5%22%2F%3E%3Cpath%20stroke-linecap%3D%22round%22%20d%3D%22M9.663%2020.111C10%2019.607%2010%2018.904%2010%2017.5s0-2.107-.337-2.611a2%202%200%200%200-.552-.552C8.607%2014%207.904%2014%206.5%2014s-2.107%200-2.611.337a2%202%200%200%200-.552.552C3%2015.393%203%2016.096%203%2017.5s0%202.107.337%202.611a2%202%200%200%200%20.552.552C4.393%2021%205.096%2021%206.5%2021s2.107%200%202.611-.337a2%202%200%200%200%20.552-.552%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/shapes-01.svg?color=%231a73e8&size=48