Clipboard Search icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="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.25V10.0997C4.46553 9.86173 4.96945 9.68814 5.5 9.59069V6.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.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.5H13.8316C14.0561 20.9734 14.0561 21.5266 13.8316 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 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.5ZM9.95001 17.8894C10.6054 17.1076 11 16.0999 11 15C11 12.5147 8.98528 10.5 6.5 10.5C4.01472 10.5 2 12.5147 2 15C2 17.4853 4.01472 19.5 6.5 19.5C7.34245 19.5 8.13082 19.2685 8.80499 18.8656L11.7197 21.7803C12.0126 22.0732 12.4874 22.0732 12.7803 21.7803C13.0732 21.4874 13.0732 21.0126 12.7803 20.7197L9.95001 17.8894ZM6.5 18C4.84315 18 3.5 16.6569 3.5 15C3.5 13.3431 4.84315 12 6.5 12C8.15685 12 9.5 13.3431 9.5 15C9.5 16.6569 8.15685 18 6.5 18Z" 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_search_24_regular.svg";

Details

Keywords

copymemoryanalog