Options icon

Use the Options 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 { Options24Regular, Options24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Options24Regular aria-label="Options" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_options_24_regular.svg" width="24" height="24" alt="Options">

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="M8.75 14.5C10.2861 14.5 11.5738 15.5656 11.9131 16.998L21.25 17C21.6642 17 22 17.3358 22 17.75C22 18.1297 21.7176 18.4435 21.3516 18.4932L21.25 18.5L11.9131 18.501C11.5742 19.9339 10.2865 21 8.75 21C7.21354 21 5.92583 19.9339 5.58691 18.501L2.75 18.5C2.33579 18.5 2 18.1642 2 17.75C2 17.3703 2.28236 17.0565 2.64844 17.0068L2.75 17L5.58691 16.999C5.92583 15.5661 7.21354 14.5 8.75 14.5ZM8.75 16C7.7835 16 7 16.7835 7 17.75C7 18.7165 7.7835 19.5 8.75 19.5C9.7165 19.5 10.5 18.7165 10.5 17.75C10.5 16.7835 9.7165 16 8.75 16ZM15.25 3C16.7865 3 18.0742 4.06613 18.4131 5.49902L21.25 5.5C21.6642 5.5 22 5.83579 22 6.25C22 6.6297 21.7176 6.9435 21.3516 6.99316L21.25 7L18.4131 7.00098C18.0742 8.43387 16.7865 9.5 15.25 9.5C13.7135 9.5 12.4258 8.43387 12.0869 7.00098L2.75 7C2.33579 7 2 6.66421 2 6.25C2 5.8703 2.28236 5.5565 2.64844 5.50684L2.75 5.5L12.0869 5.49805C12.4262 4.06562 13.7139 3 15.25 3ZM15.25 4.5C14.2836 4.5 13.5002 5.2837 13.5 6.25C13.5 7.2165 14.2835 8 15.25 8C16.2165 8 17 7.2165 17 6.25C16.9998 5.2837 16.2164 4.5 15.25 4.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/options_24_regular.svg";

Details

Keywords

settingsslider