Clipboard Chat Empty icon

Use the Clipboard Chat Empty 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 { ClipboardChatEmpty24Regular, ClipboardChatEmpty24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ClipboardChatEmpty24Regular aria-label="Clipboard Chat Empty" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_clipboard_chat_empty_24_regular.svg" width="24" height="24" alt="Clipboard Chat Empty">

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.25V9.50391C19.5383 9.15676 19.0359 8.86061 18.5 8.62598V6.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.5H8.14746L8.07324 20.748C7.94726 21.1697 7.98732 21.6151 8.16992 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.75ZM10.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.25ZM15.835 9.00879C19.2691 9.18312 22 12.0225 22 15.5C22 19.0899 19.0899 22 15.5 22C14.391 22 13.3459 21.7197 12.4307 21.2285L9.96582 21.9688C9.70159 22.048 9.41484 21.9753 9.21973 21.7803C9.02481 21.5854 8.95231 21.2992 9.03125 21.0352L9.76953 18.5684C9.3129 17.7168 9.03939 16.7526 9.00391 15.7295L9 15.5C9 11.9101 11.9101 9 15.5 9L15.835 9.00879ZM15.5 10.5C12.7386 10.5 10.5 12.7386 10.5 15.5L10.5127 15.8535C10.5694 16.6696 10.8211 17.4308 11.2217 18.0908C11.3315 18.272 11.3595 18.4913 11.2988 18.6943L10.8682 20.1309L12.3037 19.7002C12.5072 19.6391 12.7276 19.6681 12.9092 19.7783C13.6639 20.2365 14.55 20.5 15.5 20.5L15.7568 20.4932C18.3989 20.3595 20.5 18.1753 20.5 15.5C20.5 12.8247 18.3989 10.6405 15.7568 10.5068L15.5 10.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_chat_empty_24_regular.svg";

Details

Keywords

copymemoryanalog