Fluent icon

Use the Fluent 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 { Fluent24Regular, Fluent24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M11.9146 2.0817C12.1257 1.97613 12.3743 1.97613 12.5854 2.0817L18.5854 5.0817C18.8395 5.20875 19 5.46845 19 5.75253C19 6.0366 18.8395 6.2963 18.5854 6.42335L13.9271 8.75253L18.5854 11.0817C18.8395 11.2087 19 11.4684 19 11.7525C19 12.0366 18.8395 12.2963 18.5854 12.4233L13 15.2161V21.25C13 21.523 12.8517 21.7744 12.6128 21.9064C12.3739 22.0385 12.0821 22.0303 11.851 21.8851L5.85102 18.1155C5.63258 17.9783 5.5 17.7384 5.5 17.4805V5.75253C5.5 5.46845 5.6605 5.20875 5.91459 5.0817L11.9146 2.0817ZM7 6.21605V17.0659L11.5 19.8931V14.7525C11.5 14.4684 11.6605 14.2087 11.9146 14.0817L16.5729 11.7525L11.9146 9.42335C11.6605 9.2963 11.5 9.0366 11.5 8.75253C11.5 8.46845 11.6605 8.20875 11.9146 8.08171L16.5729 5.75253L12.25 3.59105L7 6.21605Z" 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/fluent_24_regular.svg";

Details

Keywords

fopensourcedesignsystem