Clipboard Brush icon
Used in copy & task scenarios. The Clipboard Brush icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Clipboard Brush 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 { ClipboardBrush24Regular, ClipboardBrush24Filled } from "@fluentui/react-icons";
export function Example() {
return <ClipboardBrush24Regular aria-label="Clipboard Brush" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_clipboard_brush_24_regular.svg" width="24" height="24" alt="Clipboard Brush"> 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.25V7.17676C19.5102 7.32713 19.0011 7.56344 18.5 7.84277V6.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.7695C5.5064 20.2099 5.68724 20.6461 5.99316 20.9619L6.22461 21.1885C6.55897 21.4989 6.92493 21.769 7.31152 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.75ZM20.4229 8.09375C20.9014 7.96539 21.6174 7.88072 22.1152 8.37793C22.6129 8.87567 22.5277 9.59159 22.3994 10.0703C22.254 10.6123 21.9532 11.2356 21.5596 11.8857C20.7658 13.1966 19.5018 14.7707 17.9756 16.2969C17.5465 16.7259 16.883 17.4011 16.1133 17.751C15.9186 17.8394 15.7073 17.9104 15.4834 17.9531C15.5663 18.8775 15.2567 19.8305 14.5508 20.5391L14.3457 20.7354C13.2942 21.6799 11.9073 22.0548 10.5732 21.9805C9.15327 21.9012 7.72423 21.3106 6.71094 20.2666C6.53165 20.0815 6.4604 19.8177 6.52148 19.5674C6.58277 19.3171 6.76729 19.1147 7.01172 19.0332C8.39136 18.5733 8.74911 18.1197 8.93262 17.7783C9.06386 17.534 9.10539 17.365 9.26074 17C9.39965 16.6737 9.59374 16.3047 9.95117 15.9473C10.66 15.2386 11.6143 14.9277 12.54 15.0107C12.5828 14.7869 12.6547 14.5756 12.7432 14.3809C13.0931 13.6112 13.7682 12.9476 14.1973 12.5186C15.7232 10.9926 17.2968 9.72843 18.6074 8.93457C19.2574 8.54094 19.881 8.23928 20.4229 8.09375ZM13.4863 17.0078C12.803 16.3246 11.6951 16.3247 11.0117 17.0078C10.8402 17.1793 10.7392 17.3588 10.6416 17.5879C10.5606 17.7783 10.422 18.1735 10.2529 18.4883C9.96167 19.0301 9.51884 19.5097 8.72949 19.9336C9.3124 20.2533 9.98011 20.4446 10.6562 20.4824C11.736 20.5426 12.7689 20.2112 13.4824 19.4863L13.4863 19.4824C14.1695 18.799 14.1696 17.6911 13.4863 17.0078ZM10.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.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_brush_24_regular.svg";Details
| Name | Clipboard Brush |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_clipboard_brush_24_regular.svg |
| Filled file | ic_fluent_clipboard_brush_24_filled.svg |
| React components | ClipboardBrush24Regular, ClipboardBrush24Filled |
| License | MIT (© Microsoft Corporation) |