Attach Text icon

Use the Attach Text 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 { AttachText24Regular, AttachText24Filled } from "@fluentui/react-icons";

export function Example() {
  return <AttachText24Regular aria-label="Attach Text" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_attach_text_24_regular.svg" width="24" height="24" alt="Attach Text">

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="M7.25 3.5C9.52817 3.5 11.3877 5.29251 11.4951 7.54408L11.5 7.75V18.5C11.5 19.8807 10.3807 21 9 21C7.67452 21 6.58996 19.9685 6.50532 18.6644L6.5 18.5V9C6.5 8.58579 6.83579 8.25 7.25 8.25C7.6297 8.25 7.94349 8.53215 7.99315 8.89823L8 9V18.5C8 19.0523 8.44772 19.5 9 19.5C9.51284 19.5 9.93551 19.114 9.99327 18.6166L10 18.5V7.75C10 6.23122 8.76878 5 7.25 5C5.78747 5 4.5916 6.1417 4.50502 7.58248L4.5 7.75V17C4.5 17.4142 4.16421 17.75 3.75 17.75C3.3703 17.75 3.05651 17.4678 3.00685 17.1018L3 17V7.75C3 5.40279 4.90279 3.5 7.25 3.5ZM16.25 16C16.6642 16 17 16.3358 17 16.75C17 17.1297 16.7178 17.4435 16.3518 17.4932L16.25 17.5H13.75C13.3358 17.5 13 17.1642 13 16.75C13 16.3703 13.2822 16.0565 13.6482 16.0068L13.75 16H16.25ZM20.25 13C20.6642 13 21 13.3358 21 13.75C21 14.1297 20.7178 14.4435 20.3518 14.4932L20.25 14.5H13.75C13.3358 14.5 13 14.1642 13 13.75C13 13.3703 13.2822 13.0565 13.6482 13.0068L13.75 13H20.25ZM20.25 10C20.6642 10 21 10.3358 21 10.75C21 11.1297 20.7178 11.4435 20.3518 11.4932L20.25 11.5H13.75C13.3358 11.5 13 11.1642 13 10.75C13 10.3703 13.2822 10.0565 13.6482 10.0068L13.75 10H20.25ZM20.25 7C20.6642 7 21 7.33579 21 7.75C21 8.1297 20.7178 8.44349 20.3518 8.49315L20.25 8.5H13.75C13.3358 8.5 13 8.16421 13 7.75C13 7.3703 13.2822 7.05651 13.6482 7.00685L13.75 7H20.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/attach_text_24_regular.svg";

Details

Keywords

paperclipfilesharesend