Markdown icon

Use the Markdown 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 { Markdown24Regular, Markdown24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M2.9707 5.0537C3.25523 4.93971 3.58132 5.0107 3.79297 5.23241L8.5 10.1631L13.207 5.23241C13.4187 5.0107 13.7448 4.93971 14.0293 5.0537C14.3137 5.16777 14.5 5.44358 14.5 5.74999V17.25C14.5 17.6642 14.1642 18 13.75 18C13.3358 18 13 17.6642 13 17.25V7.62206L9.04297 11.7676C8.90145 11.9158 8.70496 12 8.5 12C8.29504 12 8.09855 11.9158 7.95703 11.7676L4 7.62206V17.25C3.99996 17.6642 3.66419 18 3.25 18C2.83581 18 2.50004 17.6642 2.5 17.25V5.74999C2.50001 5.44358 2.68633 5.16777 2.9707 5.0537ZM19.25 4.99999C19.6642 4.99999 20 5.33579 20 5.74999V15.4394L21.2227 14.2178C21.5155 13.9249 21.9903 13.9249 22.2832 14.2178C22.5761 14.5106 22.5761 14.9854 22.2832 15.2783L19.7822 17.7803C19.4895 18.073 19.0146 18.0728 18.7217 17.7803L16.2197 15.2783C15.9269 14.9854 15.9269 14.5107 16.2197 14.2178C16.5126 13.9249 16.9874 13.9249 17.2803 14.2178L18.5 15.4375V5.74999C18.5 5.33579 18.8358 4.99999 19.25 4.99999Z" 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/markdown_24_regular.svg";

Details

Keywords

formatconvertmarkuplanguagetextcodearrow