polygon icon

polygon from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name: polygon
Set: Phosphor
Style: Regular
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

polygon-bold polygon-duotone polygon-fill polygon-light polygon-thin

The same icon in other sets

polygonBoxIcons v2 polygonBoxIcons v2 Solid polygonDevicon polygonHealth Icons polygonHuge Icons polygon-fillMingCute Icon polygonSimple Icons polygonTabler Icons polygonWeb3 Icons polygonWeb3 Icons Branded polygonUnicons polygonUnicons Monochrome polygonUnicons Solid

Use the polygon icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M230.64 49.36a32 32 0 0 0-45.26 0a32 32 0 0 0-5.16 6.76L152 48.42a32 32 0 0 0-54.63-23.06a32.06 32.06 0 0 0-5.76 37.41L57.67 93.32a32.05 32.05 0 0 0-40.31 4.05a32 32 0 0 0 42.89 47.41l70 51.36a32 32 0 1 0 47.57-14.69l27.39-77.59q1.38.12 2.76.12a32 32 0 0 0 22.63-54.62Zm-122-12.69a16 16 0 1 1 0 22.64a16 16 0 0 1 .04-22.64Zm-80 94.65a16 16 0 0 1 0-22.64a16 16 0 1 1 0 22.64m142.65 88a16 16 0 0 1-22.63-22.63a16 16 0 1 1 22.63 22.63m-8.55-43.18a32 32 0 0 0-23 7.08l-70-51.36a32.17 32.17 0 0 0-1.34-26.65l33.95-30.55a32 32 0 0 0 45.47-10.81L176 71.56a32 32 0 0 0 14.12 27ZM219.3 83.3a16 16 0 1 1-22.6-22.62a16 16 0 0 1 22.63 22.63Z"/></svg>

React

import type { SVGProps } from "react";

export function PhPolygon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M230.64 49.36a32 32 0 0 0-45.26 0a32 32 0 0 0-5.16 6.76L152 48.42a32 32 0 0 0-54.63-23.06a32.06 32.06 0 0 0-5.76 37.41L57.67 93.32a32.05 32.05 0 0 0-40.31 4.05a32 32 0 0 0 42.89 47.41l70 51.36a32 32 0 1 0 47.57-14.69l27.39-77.59q1.38.12 2.76.12a32 32 0 0 0 22.63-54.62Zm-122-12.69a16 16 0 1 1 0 22.64a16 16 0 0 1 .04-22.64Zm-80 94.65a16 16 0 0 1 0-22.64a16 16 0 1 1 0 22.64m142.65 88a16 16 0 0 1-22.63-22.63a16 16 0 1 1 22.63 22.63m-8.55-43.18a32 32 0 0 0-23 7.08l-70-51.36a32.17 32.17 0 0 0-1.34-26.65l33.95-30.55a32 32 0 0 0 45.47-10.81L176 71.56a32 32 0 0 0 14.12 27ZM219.3 83.3a16 16 0 1 1-22.6-22.62a16 16 0 0 1 22.63 22.63Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M230.64 49.36a32 32 0 0 0-45.26 0a32 32 0 0 0-5.16 6.76L152 48.42a32 32 0 0 0-54.63-23.06a32.06 32.06 0 0 0-5.76 37.41L57.67 93.32a32.05 32.05 0 0 0-40.31 4.05a32 32 0 0 0 42.89 47.41l70 51.36a32 32 0 1 0 47.57-14.69l27.39-77.59q1.38.12 2.76.12a32 32 0 0 0 22.63-54.62Zm-122-12.69a16 16 0 1 1 0 22.64a16 16 0 0 1 .04-22.64Zm-80 94.65a16 16 0 0 1 0-22.64a16 16 0 1 1 0 22.64m142.65 88a16 16 0 0 1-22.63-22.63a16 16 0 1 1 22.63 22.63m-8.55-43.18a32 32 0 0 0-23 7.08l-70-51.36a32.17 32.17 0 0 0-1.34-26.65l33.95-30.55a32 32 0 0 0 45.47-10.81L176 71.56a32 32 0 0 0 14.12 27ZM219.3 83.3a16 16 0 1 1-22.6-22.62a16 16 0 0 1 22.63 22.63Z"/></svg>
</template>

CSS

.icon-polygon {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M230.64%2049.36a32%2032%200%200%200-45.26%200a32%2032%200%200%200-5.16%206.76L152%2048.42a32%2032%200%200%200-54.63-23.06a32.06%2032.06%200%200%200-5.76%2037.41L57.67%2093.32a32.05%2032.05%200%200%200-40.31%204.05a32%2032%200%200%200%2042.89%2047.41l70%2051.36a32%2032%200%201%200%2047.57-14.69l27.39-77.59q1.38.12%202.76.12a32%2032%200%200%200%2022.63-54.62Zm-122-12.69a16%2016%200%201%201%200%2022.64a16%2016%200%200%201%20.04-22.64Zm-80%2094.65a16%2016%200%200%201%200-22.64a16%2016%200%201%201%200%2022.64m142.65%2088a16%2016%200%200%201-22.63-22.63a16%2016%200%201%201%2022.63%2022.63m-8.55-43.18a32%2032%200%200%200-23%207.08l-70-51.36a32.17%2032.17%200%200%200-1.34-26.65l33.95-30.55a32%2032%200%200%200%2045.47-10.81L176%2071.56a32%2032%200%200%200%2014.12%2027ZM219.3%2083.3a16%2016%200%201%201-22.6-22.62a16%2016%200%200%201%2022.63%2022.63Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M230.64%2049.36a32%2032%200%200%200-45.26%200a32%2032%200%200%200-5.16%206.76L152%2048.42a32%2032%200%200%200-54.63-23.06a32.06%2032.06%200%200%200-5.76%2037.41L57.67%2093.32a32.05%2032.05%200%200%200-40.31%204.05a32%2032%200%200%200%2042.89%2047.41l70%2051.36a32%2032%200%201%200%2047.57-14.69l27.39-77.59q1.38.12%202.76.12a32%2032%200%200%200%2022.63-54.62Zm-122-12.69a16%2016%200%201%201%200%2022.64a16%2016%200%200%201%20.04-22.64Zm-80%2094.65a16%2016%200%200%201%200-22.64a16%2016%200%201%201%200%2022.64m142.65%2088a16%2016%200%200%201-22.63-22.63a16%2016%200%201%201%2022.63%2022.63m-8.55-43.18a32%2032%200%200%200-23%207.08l-70-51.36a32.17%2032.17%200%200%200-1.34-26.65l33.95-30.55a32%2032%200%200%200%2045.47-10.81L176%2071.56a32%2032%200%200%200%2014.12%2027ZM219.3%2083.3a16%2016%200%201%201-22.6-22.62a16%2016%200%200%201%2022.63%2022.63Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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