Square Hint Hexagon icon

Use the Square Hint Hexagon 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 { SquareHintHexagon24Regular, SquareHintHexagon24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SquareHintHexagon24Regular aria-label="Square Hint Hexagon" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_square_hint_hexagon_24_regular.svg" width="24" height="24" alt="Square Hint Hexagon">

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="M10.75 3C10.3358 3 10 3.33579 10 3.75C10 4.16421 10.3358 4.5 10.75 4.5H13.25C13.6642 4.5 14 4.16421 14 3.75C14 3.33579 13.6642 3 13.25 3H10.75ZM17 3.75C17 4.16421 17.3358 4.5 17.75 4.5C18.7165 4.5 19.5 5.2835 19.5 6.25C19.5 6.66421 19.8358 7 20.25 7C20.6642 7 21 6.66421 21 6.25C21 4.45507 19.5449 3 17.75 3C17.3358 3 17 3.33579 17 3.75ZM7 3.75C7 3.33579 6.66421 3 6.25 3C4.45507 3 3 4.45507 3 6.25C3 6.66421 3.33579 7 3.75 7C4.16421 7 4.5 6.66421 4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5C6.66421 4.5 7 4.16421 7 3.75ZM3 17.75C3 17.3358 3.33579 17 3.75 17C4.16421 17 4.5 17.3358 4.5 17.75C4.5 18.7165 5.2835 19.5 6.25 19.5C6.66421 19.5 7 19.8358 7 20.25C7 20.6642 6.66421 21 6.25 21C4.45507 21 3 19.5449 3 17.75ZM10 20.25C10 19.8358 10.3358 19.5 10.75 19.5H13.25C13.6642 19.5 14 19.8358 14 20.25C14 20.6642 13.6642 21 13.25 21H10.75C10.3358 21 10 20.6642 10 20.25ZM17 20.25C17 19.8358 17.3358 19.5 17.75 19.5C18.7165 19.5 19.5 18.7165 19.5 17.75C19.5 17.3358 19.8358 17 20.25 17C20.6642 17 21 17.3358 21 17.75C21 19.5449 19.5449 21 17.75 21C17.3358 21 17 20.6642 17 20.25ZM21 10.75C21 10.3358 20.6642 10 20.25 10C19.8358 10 19.5 10.3358 19.5 10.75V13.25C19.5 13.6642 19.8358 14 20.25 14C20.6642 14 21 13.6642 21 13.25V10.75ZM3.75 14C3.33579 14 3 13.6642 3 13.25V10.75C3 10.3358 3.33579 10 3.75 10C4.16421 10 4.5 10.3358 4.5 10.75V13.25C4.5 13.6642 4.16421 14 3.75 14ZM9.98106 7C9.44507 7 8.9498 7.286 8.68189 7.75024L6.66176 11.2507C6.394 11.7147 6.394 12.2862 6.66176 12.7502L8.68189 16.2506C8.9498 16.7149 9.44507 17.0009 9.98106 17.0009H14.0208C14.5568 17.0009 15.052 16.7149 15.3199 16.2506L17.3401 12.7502C17.6078 12.2862 17.6078 11.7146 17.3401 11.2507L15.3199 7.75024C15.052 7.286 14.5568 7 14.0208 7H9.98106ZM9.98106 8.5H14.0208L16.0409 12.0004L14.0208 15.5009H9.98106L7.96094 12.0004L9.98106 8.5Z" 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/square_hint_hexagon_24_regular.svg";

Details