hexagon 01 icon

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

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

Use the hexagon 01 icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="1.5" d="M8.882 3.33C10.404 2.443 11.165 2 12 2s1.596.443 3.118 1.33l2.764 1.61c1.522.887 2.283 1.33 2.7 2.06S21 8.616 21 10.39v3.22c0 1.774 0 2.66-.418 3.39c-.417.73-1.178 1.173-2.7 2.06l-2.764 1.61C13.596 21.557 12.835 22 12 22s-1.596-.443-3.118-1.33l-2.764-1.61c-1.522-.887-2.283-1.33-2.7-2.06S3 15.383 3 13.61v-3.22C3 8.615 3 7.73 3.418 7c.417-.73 1.178-1.173 2.7-2.06z"/></svg>

React

import type { SVGProps } from "react";

export function HugeiconsHexagon01(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeWidth="1.5" d="M8.882 3.33C10.404 2.443 11.165 2 12 2s1.596.443 3.118 1.33l2.764 1.61c1.522.887 2.283 1.33 2.7 2.06S21 8.616 21 10.39v3.22c0 1.774 0 2.66-.418 3.39c-.417.73-1.178 1.173-2.7 2.06l-2.764 1.61C13.596 21.557 12.835 22 12 22s-1.596-.443-3.118-1.33l-2.764-1.61c-1.522-.887-2.283-1.33-2.7-2.06S3 15.383 3 13.61v-3.22C3 8.615 3 7.73 3.418 7c.417-.73 1.178-1.173 2.7-2.06z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-width="1.5" d="M8.882 3.33C10.404 2.443 11.165 2 12 2s1.596.443 3.118 1.33l2.764 1.61c1.522.887 2.283 1.33 2.7 2.06S21 8.616 21 10.39v3.22c0 1.774 0 2.66-.418 3.39c-.417.73-1.178 1.173-2.7 2.06l-2.764 1.61C13.596 21.557 12.835 22 12 22s-1.596-.443-3.118-1.33l-2.764-1.61c-1.522-.887-2.283-1.33-2.7-2.06S3 15.383 3 13.61v-3.22C3 8.615 3 7.73 3.418 7c.417-.73 1.178-1.173 2.7-2.06z"/></svg>
</template>

CSS

.icon-hexagon-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%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20d%3D%22M8.882%203.33C10.404%202.443%2011.165%202%2012%202s1.596.443%203.118%201.33l2.764%201.61c1.522.887%202.283%201.33%202.7%202.06S21%208.616%2021%2010.39v3.22c0%201.774%200%202.66-.418%203.39c-.417.73-1.178%201.173-2.7%202.06l-2.764%201.61C13.596%2021.557%2012.835%2022%2012%2022s-1.596-.443-3.118-1.33l-2.764-1.61c-1.522-.887-2.283-1.33-2.7-2.06S3%2015.383%203%2013.61v-3.22C3%208.615%203%207.73%203.418%207c.417-.73%201.178-1.173%202.7-2.06z%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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20d%3D%22M8.882%203.33C10.404%202.443%2011.165%202%2012%202s1.596.443%203.118%201.33l2.764%201.61c1.522.887%202.283%201.33%202.7%202.06S21%208.616%2021%2010.39v3.22c0%201.774%200%202.66-.418%203.39c-.417.73-1.178%201.173-2.7%202.06l-2.764%201.61C13.596%2021.557%2012.835%2022%2012%2022s-1.596-.443-3.118-1.33l-2.764-1.61c-1.522-.887-2.283-1.33-2.7-2.06S3%2015.383%203%2013.61v-3.22C3%208.615%203%207.73%203.418%207c.417-.73%201.178-1.173%202.7-2.06z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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