Clipboard Link icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.25V19.75C4 20.9926 5.00736 22 6.25 22H10.9996C10.6634 21.5523 10.4005 21.0464 10.2289 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.5H13.75C14.5284 6.5 15.2145 6.10471 15.6185 5.50391H17.5023V5.50002L17.75 5.5C18.1642 5.5 18.5 5.83579 18.5 6.25V14H20V6.25C20 5.00736 18.9926 4 17.75 4L15.9862 3.99944ZM10.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.5ZM19 15C21.2091 15 23 16.7909 23 19C23 21.1422 21.316 22.8911 19.1996 22.9951L19 23C18.5858 23 18.25 22.6642 18.25 22.25C18.25 21.8703 18.5322 21.5565 18.8982 21.5068L19 21.5C20.3807 21.5 21.5 20.3807 21.5 19C21.5 17.6745 20.4685 16.59 19.1644 16.5053L19 16.5C18.5858 16.5 18.25 16.1642 18.25 15.75C18.25 15.3703 18.5322 15.0565 18.8982 15.0068L19 15ZM15 15C15.4142 15 15.75 15.3358 15.75 15.75C15.75 16.1297 15.4678 16.4435 15.1018 16.4932L15 16.5C13.6193 16.5 12.5 17.6193 12.5 19C12.5 20.3255 13.5315 21.41 14.8356 21.4947L15 21.5C15.4142 21.5 15.75 21.8358 15.75 22.25C15.75 22.6297 15.4678 22.9435 15.1018 22.9932L15 23C12.7909 23 11 21.2091 11 19C11 16.8578 12.684 15.1089 14.8004 15.0049L15 15ZM15.25 18.25H18.75C19.1642 18.25 19.5 18.5858 19.5 19C19.5 19.3797 19.2178 19.6935 18.8518 19.7432L18.75 19.75H15.25C14.8358 19.75 14.5 19.4142 14.5 19C14.5 18.6203 14.7822 18.3065 15.1482 18.2568L15.25 18.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_link_24_regular.svg";

Details

Keywords

copymemoryanalog