Clipboard Markdown icon

Use the Clipboard 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 { ClipboardMarkdown24Regular, ClipboardMarkdown24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clipboard_markdown_24_regular.svg" width="24" height="24" alt="Clipboard 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="M13.75 2C14.9081 2 15.862 2.87501 15.9863 4H17.75C18.9926 4 20 5.00736 20 6.25V14.1699C19.7725 14.0618 19.5186 14 19.25 14C18.9814 14 18.7275 14.0618 18.5 14.1699V6.25C18.5 5.83579 18.1642 5.5 17.75 5.5H15.6211C15.2175 6.10299 14.5301 6.5 13.75 6.5H10.25C9.4699 6.5 8.78254 6.10299 8.37891 5.5H6.25C5.83579 5.5 5.5 5.83579 5.5 6.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H7V21.25C7 21.5188 7.06263 21.7724 7.1709 22H6.25C5.00736 22 4 20.9926 4 19.75V6.25C4 5.00736 5.00736 4 6.25 4H8.01367C8.13803 2.87501 9.09186 2 10.25 2H13.75ZM14.4219 15.0205C14.7604 15.1004 15 15.4022 15 15.75V21.25C15 21.6642 14.6642 22 14.25 22C13.8358 22 13.5 21.6642 13.5 21.25V18.9268L12.1709 21.585C12.0439 21.839 11.7841 22 11.5 22C11.2159 22 10.9561 21.839 10.8291 21.585L9.5 18.9268V21.25C9.5 21.6642 9.16421 22 8.75 22C8.33579 22 8 21.6642 8 21.25V15.75C8 15.4022 8.2396 15.1004 8.57812 15.0205C8.91655 14.9408 9.26539 15.104 9.4209 15.415L11.5 19.5732L13.5791 15.415C13.7346 15.104 14.0834 14.9408 14.4219 15.0205ZM19.25 15C19.6642 15 20 15.3358 20 15.75V19.4395L21.2197 18.2197C21.5126 17.9268 21.9874 17.9268 22.2803 18.2197C22.5732 18.5126 22.5732 18.9874 22.2803 19.2803L19.7803 21.7803C19.4874 22.0732 19.0126 22.0732 18.7197 21.7803L16.2197 19.2803C15.9268 18.9874 15.9268 18.5126 16.2197 18.2197C16.5126 17.9268 16.9874 17.9268 17.2803 18.2197L18.5 19.4395V15.75C18.5 15.3358 18.8358 15 19.25 15ZM10.25 3.5C9.83579 3.5 9.5 3.83579 9.5 4.25C9.5 4.66421 9.83579 5 10.25 5H13.75C14.1642 5 14.5 4.66421 14.5 4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H10.25Z" 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/clipboard_markdown_24_regular.svg";

Details