Clipboard Text RTL icon

Use the Clipboard Text RTL 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 { ClipboardTextRtl24Regular, ClipboardTextRtl24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClipboardTextRtl24Regular aria-label="Clipboard Text RTL" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clipboard_text_rtl_24_regular.svg" width="24" height="24" alt="Clipboard Text RTL">

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="M8 9C7.58579 9 7.25 9.33579 7.25 9.75C7.25 10.1642 7.58579 10.5 8 10.5H16C16.4142 10.5 16.75 10.1642 16.75 9.75C16.75 9.33579 16.4142 9 16 9H8Z" fill="currentColor"/>
<path d="M11.25 13.75C11.25 13.3358 11.5858 13 12 13H16C16.4142 13 16.75 13.3358 16.75 13.75C16.75 14.1642 16.4142 14.5 16 14.5H12C11.5858 14.5 11.25 14.1642 11.25 13.75Z" fill="currentColor"/>
<path d="M10 17C9.58579 17 9.25 17.3358 9.25 17.75C9.25 18.1642 9.58579 18.5 10 18.5H16C16.4142 18.5 16.75 18.1642 16.75 17.75C16.75 17.3358 16.4142 17 16 17H10Z" fill="currentColor"/>
<path d="M15.9862 3.99944C15.8616 2.87472 14.9079 2 13.75 2H10.25C9.09205 2 8.13841 2.87472 8.01379 3.99944L6.25 4C5.00736 4 4 5.00736 4 6.25V19.75C4 20.9926 5.00736 22 6.25 22H17.75C18.9926 22 20 20.9926 20 19.75V6.25C20 5.00736 18.9926 4 17.75 4L15.9862 3.99944ZM15.9948 4.09595L16 4.25C16 4.19822 15.9983 4.14685 15.9948 4.09595ZM10.25 6.5H13.75C14.53 6.5 15.2174 6.10307 15.621 5.50016L17.75 5.5C18.1642 5.5 18.5 5.83579 18.5 6.25V19.75C18.5 20.1642 18.1642 20.5 17.75 20.5H6.25C5.83579 20.5 5.5 20.1642 5.5 19.75V6.25C5.5 5.83579 5.83579 5.5 6.25 5.5L8.37902 5.5002C8.78267 6.1031 9.46997 6.5 10.25 6.5ZM10.25 3.5H13.75C14.1642 3.5 14.5 3.83579 14.5 4.25C14.5 4.66421 14.1642 5 13.75 5H10.25C9.83579 5 9.5 4.66421 9.5 4.25C9.5 3.83579 9.83579 3.5 10.25 3.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/clipboard_text_rtl_24_regular.svg";

Details