Clipboard Image icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clipboard_image_24_regular.svg" width="24" height="24" alt="Clipboard Image">

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.9089 2 15.8631 2.8761 15.9865 4.00209C15.9864 4.0012 15.9863 4.00032 15.9862 3.99944L17.75 4C18.9926 4 20 5.00736 20 6.25V11H18.5V6.25C18.5 5.83579 18.1642 5.5 17.75 5.5L15.621 5.5002C15.2173 6.1031 14.53 6.5 13.75 6.5H10.25C9.46997 6.5 8.78264 6.10306 8.379 5.50016L6.25 5.5C5.83579 5.5 5.5 5.83579 5.5 6.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5H11.0309C11.0984 21.041 11.2739 21.5484 11.5351 22H6.25C5.00736 22 4 20.9926 4 19.75V6.25C4 5.00736 5.00736 4 6.25 4L8.01379 3.99944C8.13841 2.87472 9.09205 2 10.25 2H13.75ZM15.9948 4.09595L16 4.25C16 4.19822 15.9983 4.14685 15.9948 4.09595ZM13.75 3.5H10.25C9.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.5ZM15 12C13.3431 12 12 13.3431 12 15V20C12 20.5564 12.1514 21.0773 12.4154 21.524L15.909 18.0303C16.7877 17.1516 18.2123 17.1517 19.091 18.0303L22.5846 21.524C22.8486 21.0773 23 20.5564 23 20V15C23 13.3431 21.6569 12 20 12H15ZM15 23C14.4436 23 13.9227 22.8486 13.476 22.5846L16.9697 19.091C17.2626 18.7981 17.7374 18.7981 18.0303 19.091L21.524 22.5846C21.0773 22.8486 20.5564 23 20 23H15ZM20 16C19.4477 16 19 15.5523 19 15C19 14.4477 19.4477 14 20 14C20.5523 14 21 14.4477 21 15C21 15.5523 20.5523 16 20 16Z" 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_image_24_regular.svg";

Details

Keywords

copymemoryanalog