heptagon icon

heptagon from Font Awesome Solid by Dave Gandy · Solid · CC-BY-4.0 Attribution required.

Name: heptagon
Set: Font Awesome Solid
Style: Solid
Viewbox: 640×640
License: CC BY 4.0

The same icon in other sets

heptagonAkar Icons heptagonBootstrap Icons heptagonIconoir

Use the heptagon icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M299.4 32.5c15.9-5.5 33.5-4.6 48.8 2.7l172.4 83l6.3 3.5c14.2 9 24.5 23.3 28.3 39.9l42.6 186.5l1.2 7.2c1.6 14.3-1.7 28.8-9.4 41.1l-4.2 5.9l-119.3 149.6c-12.1 15.2-30.6 24.1-50 24.1H224.8c-19.5 0-37.9-8.9-50-24.1L55.5 402.4c-12.1-15.2-16.7-35.2-12.3-54.2l42.6-186.5l2-7c5.6-15.9 17.2-29 32.6-36.4l172.4-83l6.7-2.7z"/></svg>

React

import type { SVGProps } from "react";

export function Fa7SolidHeptagon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M299.4 32.5c15.9-5.5 33.5-4.6 48.8 2.7l172.4 83l6.3 3.5c14.2 9 24.5 23.3 28.3 39.9l42.6 186.5l1.2 7.2c1.6 14.3-1.7 28.8-9.4 41.1l-4.2 5.9l-119.3 149.6c-12.1 15.2-30.6 24.1-50 24.1H224.8c-19.5 0-37.9-8.9-50-24.1L55.5 402.4c-12.1-15.2-16.7-35.2-12.3-54.2l42.6-186.5l2-7c5.6-15.9 17.2-29 32.6-36.4l172.4-83l6.7-2.7z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640"><path fill="currentColor" d="M299.4 32.5c15.9-5.5 33.5-4.6 48.8 2.7l172.4 83l6.3 3.5c14.2 9 24.5 23.3 28.3 39.9l42.6 186.5l1.2 7.2c1.6 14.3-1.7 28.8-9.4 41.1l-4.2 5.9l-119.3 149.6c-12.1 15.2-30.6 24.1-50 24.1H224.8c-19.5 0-37.9-8.9-50-24.1L55.5 402.4c-12.1-15.2-16.7-35.2-12.3-54.2l42.6-186.5l2-7c5.6-15.9 17.2-29 32.6-36.4l172.4-83l6.7-2.7z"/></svg>
</template>

CSS

.icon-heptagon {
  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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M299.4%2032.5c15.9-5.5%2033.5-4.6%2048.8%202.7l172.4%2083l6.3%203.5c14.2%209%2024.5%2023.3%2028.3%2039.9l42.6%20186.5l1.2%207.2c1.6%2014.3-1.7%2028.8-9.4%2041.1l-4.2%205.9l-119.3%20149.6c-12.1%2015.2-30.6%2024.1-50%2024.1H224.8c-19.5%200-37.9-8.9-50-24.1L55.5%20402.4c-12.1-15.2-16.7-35.2-12.3-54.2l42.6-186.5l2-7c5.6-15.9%2017.2-29%2032.6-36.4l172.4-83l6.7-2.7z%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%20640%20640%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M299.4%2032.5c15.9-5.5%2033.5-4.6%2048.8%202.7l172.4%2083l6.3%203.5c14.2%209%2024.5%2023.3%2028.3%2039.9l42.6%20186.5l1.2%207.2c1.6%2014.3-1.7%2028.8-9.4%2041.1l-4.2%205.9l-119.3%20149.6c-12.1%2015.2-30.6%2024.1-50%2024.1H224.8c-19.5%200-37.9-8.9-50-24.1L55.5%20402.4c-12.1-15.2-16.7-35.2-12.3-54.2l42.6-186.5l2-7c5.6-15.9%2017.2-29%2032.6-36.4l172.4-83l6.7-2.7z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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