Hexagon Three icon

Use the Hexagon Three icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { HexagonThree24Regular, HexagonThree24Filled } from "@fluentui/react-icons";

export function Example() {
  return <HexagonThree24Regular aria-label="Hexagon Three" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_hexagon_three_24_regular.svg" width="24" height="24" alt="Hexagon Three">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.82705 2.875C5.13966 2.33355 5.71738 2 6.3426 2H9.51802C10.1432 2 10.721 2.33355 11.0336 2.875L12.6213 5.625C12.9339 6.16645 12.9339 6.83355 12.6213 7.375L11.0336 10.125C10.721 10.6665 10.1432 11 9.51802 11H6.3426C5.71738 11 5.13966 10.6665 4.82705 10.125L3.23934 7.375C2.92673 6.83355 2.92673 6.16645 3.23934 5.625L4.82705 2.875ZM6.3426 3.5C6.25328 3.5 6.17075 3.54765 6.12609 3.625L4.53838 6.375C4.49372 6.45235 4.49372 6.54765 4.53838 6.625L6.12609 9.375C6.17075 9.45235 6.25328 9.5 6.3426 9.5H9.51802C9.60734 9.5 9.68987 9.45235 9.73453 9.375L11.3222 6.625C11.3669 6.54765 11.3669 6.45235 11.3222 6.375L9.73453 3.625C9.68987 3.54765 9.60734 3.5 9.51802 3.5H6.3426ZM4.82705 13.875C5.13966 13.3335 5.71738 13 6.3426 13H9.51802C10.1432 13 10.721 13.3335 11.0336 13.875L12.6213 16.625C12.9339 17.1665 12.9339 17.8335 12.6213 18.375L11.0336 21.125C10.721 21.6665 10.1432 22 9.51802 22H6.3426C5.71738 22 5.13966 21.6665 4.82705 21.125L3.23934 18.375C2.92673 17.8335 2.92673 17.1665 3.23934 16.625L4.82705 13.875ZM6.3426 14.5C6.25328 14.5 6.17075 14.5476 6.12609 14.625L4.53838 17.375C4.49372 17.4524 4.49372 17.5476 4.53838 17.625L6.12609 20.375C6.17075 20.4524 6.25328 20.5 6.3426 20.5H9.51802C9.60734 20.5 9.68987 20.4524 9.73453 20.375L11.3222 17.625C11.3669 17.5476 11.3669 17.4524 11.3222 17.375L9.73453 14.625C9.68987 14.5476 9.60734 14.5 9.51802 14.5H6.3426ZM15.8426 7.5C15.2174 7.5 14.6397 7.83355 14.3271 8.375L12.7393 11.125C12.4267 11.6665 12.4267 12.3335 12.7393 12.875L14.3271 15.625C14.6397 16.1665 15.2174 16.5 15.8426 16.5H19.018C19.6432 16.5 20.221 16.1665 20.5336 15.625L22.1213 12.875C22.4339 12.3335 22.4339 11.6665 22.1213 11.125L20.5336 8.375C20.221 7.83355 19.6432 7.5 19.018 7.5H15.8426ZM15.6261 9.125C15.6707 9.04765 15.7533 9 15.8426 9H19.018C19.1073 9 19.1899 9.04765 19.2345 9.125L20.8222 11.875C20.8669 11.9524 20.8669 12.0476 20.8222 12.125L19.2345 14.875C19.1899 14.9524 19.1073 15 19.018 15H15.8426C15.7533 15 15.6707 14.9524 15.6261 14.875L14.0384 12.125C13.9937 12.0476 13.9937 11.9524 14.0384 11.875L15.6261 9.125Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/hexagon_three_24_regular.svg";

Details

Keywords

shapewebappbuilderfragmentmultiple