Mention icon

Use the Mention 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 { Mention24Regular, Mention24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M12 2C17.5226 2.00016 21.9999 6.47737 22 12C22 15.0893 20.3198 17.0254 18.25 17.0254C16.9541 17.0254 15.8114 16.2662 15.1377 14.9404C14.3338 16.173 13.0311 17 11.5 17C8.92926 17 7 14.6705 7 12C7 9.32955 8.92926 7 11.5 7C12.6753 7 13.7159 7.48764 14.5 8.27148V7.75C14.5 7.33579 14.8358 7 15.25 7C15.6642 7 16 7.33579 16 7.75V12C16 14.6107 17.3198 15.5254 18.25 15.5254C19.1802 15.5254 20.5 14.6107 20.5 12C20.4999 7.30579 16.6942 3.50016 12 3.5C7.30566 3.5 3.50013 7.30569 3.5 12C3.50016 16.6943 7.30568 20.5 12 20.5C13.0151 20.5 13.9884 20.3201 14.8906 19.9932C15.189 19.8853 15.5266 19.9466 15.751 20.1709C16.1231 20.5431 16.0216 21.1702 15.5293 21.3564C14.4319 21.7717 13.2428 22 12 22C6.47725 22 2.00016 17.5227 2 12C2.00013 6.47726 6.47723 2 12 2ZM11.5 8.5C9.92861 8.5 8.5 9.97603 8.5 12C8.5 14.024 9.92861 15.5 11.5 15.5C13.0714 15.5 14.5 14.024 14.5 12C14.5 9.97603 13.0714 8.5 11.5 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/mention_24_regular.svg";

Details

Keywords

commentsuggestionperson