polygon icon
polygon-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- polygon-thin
- Set
- Phosphor
- Style
- Thin
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
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="M227.81 52.19a28 28 0 0 0-39.6 0a27.8 27.8 0 0 0-5.88 8.65l-34.56-9.42a28 28 0 0 0-47.57-23.23a28.05 28.05 0 0 0-3.48 35.37L57.91 98.49a28 28 0 0 0-37.72 1.71a28 28 0 0 0 39.6 39.6l.18-.19l75.32 55.24A28 28 0 1 0 173 183.2l29.56-83.75a28.5 28.5 0 0 0 5.44.55a28 28 0 0 0 19.8-47.79ZM105.86 33.85a20 20 0 1 1 0 28.29a20 20 0 0 1 0-28.29m-80 100.29a20 20 0 1 1 28.28 0a20 20 0 0 1-28.29 0Zm148.3 88a20 20 0 1 1 0-28.28a20 20 0 0 1-.01 28.29Zm-8.7-41.6a28 28 0 0 0-25.25 7.66l-.18.19l-75.32-55.23a28.13 28.13 0 0 0-1.44-28.73l38.81-34.93a28 28 0 0 0 43.6-10.36l34.56 9.43a28 28 0 0 0 8 23.22a27.6 27.6 0 0 0 6.8 5Zm56.7-94.41a20 20 0 1 1 0-28.29a20 20 0 0 1-.01 28.3Z"/></svg>
React
import type { SVGProps } from "react";
export function PhPolygonThin(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="M227.81 52.19a28 28 0 0 0-39.6 0a27.8 27.8 0 0 0-5.88 8.65l-34.56-9.42a28 28 0 0 0-47.57-23.23a28.05 28.05 0 0 0-3.48 35.37L57.91 98.49a28 28 0 0 0-37.72 1.71a28 28 0 0 0 39.6 39.6l.18-.19l75.32 55.24A28 28 0 1 0 173 183.2l29.56-83.75a28.5 28.5 0 0 0 5.44.55a28 28 0 0 0 19.8-47.79ZM105.86 33.85a20 20 0 1 1 0 28.29a20 20 0 0 1 0-28.29m-80 100.29a20 20 0 1 1 28.28 0a20 20 0 0 1-28.29 0Zm148.3 88a20 20 0 1 1 0-28.28a20 20 0 0 1-.01 28.29Zm-8.7-41.6a28 28 0 0 0-25.25 7.66l-.18.19l-75.32-55.23a28.13 28.13 0 0 0-1.44-28.73l38.81-34.93a28 28 0 0 0 43.6-10.36l34.56 9.43a28 28 0 0 0 8 23.22a27.6 27.6 0 0 0 6.8 5Zm56.7-94.41a20 20 0 1 1 0-28.29a20 20 0 0 1-.01 28.3Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M227.81 52.19a28 28 0 0 0-39.6 0a27.8 27.8 0 0 0-5.88 8.65l-34.56-9.42a28 28 0 0 0-47.57-23.23a28.05 28.05 0 0 0-3.48 35.37L57.91 98.49a28 28 0 0 0-37.72 1.71a28 28 0 0 0 39.6 39.6l.18-.19l75.32 55.24A28 28 0 1 0 173 183.2l29.56-83.75a28.5 28.5 0 0 0 5.44.55a28 28 0 0 0 19.8-47.79ZM105.86 33.85a20 20 0 1 1 0 28.29a20 20 0 0 1 0-28.29m-80 100.29a20 20 0 1 1 28.28 0a20 20 0 0 1-28.29 0Zm148.3 88a20 20 0 1 1 0-28.28a20 20 0 0 1-.01 28.29Zm-8.7-41.6a28 28 0 0 0-25.25 7.66l-.18.19l-75.32-55.23a28.13 28.13 0 0 0-1.44-28.73l38.81-34.93a28 28 0 0 0 43.6-10.36l34.56 9.43a28 28 0 0 0 8 23.22a27.6 27.6 0 0 0 6.8 5Zm56.7-94.41a20 20 0 1 1 0-28.29a20 20 0 0 1-.01 28.3Z"/></svg> </template>
CSS
.icon-polygon-thin {
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%22M227.81%2052.19a28%2028%200%200%200-39.6%200a27.8%2027.8%200%200%200-5.88%208.65l-34.56-9.42a28%2028%200%200%200-47.57-23.23a28.05%2028.05%200%200%200-3.48%2035.37L57.91%2098.49a28%2028%200%200%200-37.72%201.71a28%2028%200%200%200%2039.6%2039.6l.18-.19l75.32%2055.24A28%2028%200%201%200%20173%20183.2l29.56-83.75a28.5%2028.5%200%200%200%205.44.55a28%2028%200%200%200%2019.8-47.79ZM105.86%2033.85a20%2020%200%201%201%200%2028.29a20%2020%200%200%201%200-28.29m-80%20100.29a20%2020%200%201%201%2028.28%200a20%2020%200%200%201-28.29%200Zm148.3%2088a20%2020%200%201%201%200-28.28a20%2020%200%200%201-.01%2028.29Zm-8.7-41.6a28%2028%200%200%200-25.25%207.66l-.18.19l-75.32-55.23a28.13%2028.13%200%200%200-1.44-28.73l38.81-34.93a28%2028%200%200%200%2043.6-10.36l34.56%209.43a28%2028%200%200%200%208%2023.22a27.6%2027.6%200%200%200%206.8%205Zm56.7-94.41a20%2020%200%201%201%200-28.29a20%2020%200%200%201-.01%2028.3Z%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%22M227.81%2052.19a28%2028%200%200%200-39.6%200a27.8%2027.8%200%200%200-5.88%208.65l-34.56-9.42a28%2028%200%200%200-47.57-23.23a28.05%2028.05%200%200%200-3.48%2035.37L57.91%2098.49a28%2028%200%200%200-37.72%201.71a28%2028%200%200%200%2039.6%2039.6l.18-.19l75.32%2055.24A28%2028%200%201%200%20173%20183.2l29.56-83.75a28.5%2028.5%200%200%200%205.44.55a28%2028%200%200%200%2019.8-47.79ZM105.86%2033.85a20%2020%200%201%201%200%2028.29a20%2020%200%200%201%200-28.29m-80%20100.29a20%2020%200%201%201%2028.28%200a20%2020%200%200%201-28.29%200Zm148.3%2088a20%2020%200%201%201%200-28.28a20%2020%200%200%201-.01%2028.29Zm-8.7-41.6a28%2028%200%200%200-25.25%207.66l-.18.19l-75.32-55.23a28.13%2028.13%200%200%200-1.44-28.73l38.81-34.93a28%2028%200%200%200%2043.6-10.36l34.56%209.43a28%2028%200%200%200%208%2023.22a27.6%2027.6%200%200%200%206.8%205Zm56.7-94.41a20%2020%200%201%201%200-28.29a20%2020%200%200%201-.01%2028.3Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/polygon-thin.svg?color=%231a73e8&size=48