Mention Arrow Down icon
Used to represent a mention in UI. The Mention Arrow Down icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles on a 20 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Every size and style
Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.
Regular, 20 px
ic_fluent_mention_arrow_down_20_regular.svg
Mention Arrow Down icon in React
npm install @fluentui/react-icons
import { MentionArrowDown20Regular } from "@fluentui/react-icons";
export function Example() {
return <MentionArrowDown20Regular aria-label="Mention Arrow Down" />;
}Use the Mention Arrow Down 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 { MentionArrowDown20Regular, MentionArrowDown20Filled } from "@fluentui/react-icons";
export function Example() {
return <MentionArrowDown20Regular aria-label="Mention Arrow Down" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_mention_arrow_down_20_regular.svg" width="20" height="20" alt="Mention Arrow Down"> Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M3.02 10.41q.47.24.98.38V11a7 7 0 0 0 9.29 6.61q.32-.1.56.13c.25.25.17.67-.16.8Q12.42 19 11 19a8 8 0 0 1-7.98-8.59M11 3a8 8 0 0 1 8 8c0 2.5-1.38 4-3 4-1.07 0-2.04-.66-2.57-1.82A3.4 3.4 0 0 1 10.5 15c-2 0-3.5-1.87-3.5-4v-.21q.55-.16 1.05-.42-.05.3-.05.63c0 1.73 1.19 3 2.5 3s2.5-1.27 2.5-3-1.19-3-2.5-3h-.1q.24-.46.39-.99A3.3 3.3 0 0 1 13 8.2v-.7a.5.5 0 0 1 1 0V11l.01.39c.13 1.87 1.17 2.6 1.99 2.6.88 0 2-.83 2-2.99a7 7 0 0 0-7-7h-.2q-.15-.51-.39-.98zM5.5 1a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9m0 2a.5.5 0 0 0-.5.5v2.8L3.85 5.14a.5.5 0 1 0-.7.7l2 2A.5.5 0 0 0 5.5 8a.5.5 0 0 0 .35-.15l2-2a.5.5 0 1 0-.7-.7L6 6.29V3.5a.5.5 0 0 0-.5-.5"/></svg>Details
| Name | Mention Arrow Down |
|---|---|
| Styles | Regular (outlined), Filled |
| Sizes | 20 px |
| Regular (outlined) file | ic_fluent_mention_arrow_down_20_regular.svg |
| Filled file | ic_fluent_mention_arrow_down_20_filled.svg |
| React (Regular) | MentionArrowDown20Regular |
| React (Filled) | MentionArrowDown20Filled |
| License | MIT (© Microsoft Corporation) |