Document Text Link icon

Use the Document Text 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 { DocumentTextLink24Regular, DocumentTextLink24Filled } from "@fluentui/react-icons";

export function Example() {
  return <DocumentTextLink24Regular aria-label="Document Text Link" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_document_text_link_24_regular.svg" width="24" height="24" alt="Document Text 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="M18 20.5C18.276 20.5 18.5 20.275 18.5 20V10H14C12.896 10 12 9.104 12 8V3.5H6C5.724 3.5 5.5 3.725 5.5 4V14H4.75C4.4948 14 4.2443 14.0201 4 14.0589V4C4 2.896 4.896 2 6 2H12.172C12.6865 2 13.2194 2.22035 13.585 2.586L19.414 8.414C19.789 8.789 20 9.298 20 9.828V20C20 21.104 19.104 22 18 22H11.7141C12.1196 21.568 12.4451 21.0601 12.6672 20.5H18ZM17.378 8.5L13.5 4.621V8C13.5 8.275 13.724 8.5 14 8.5H17.378ZM9.77472 14.25C10.6292 14.5394 11.3746 15.0654 11.9329 15.75H15.25C15.6642 15.75 16 15.4142 16 15C16 14.5858 15.6642 14.25 15.25 14.25H9.77472ZM12.6672 17C12.8528 17.4681 12.9662 17.9727 12.9935 18.5H15.25C15.6642 18.5 16 18.1642 16 17.75C16 17.3358 15.6642 17 15.25 17H12.6672ZM8.75 11.5C8.33579 11.5 8 11.8358 8 12.25C8 12.6642 8.33579 13 8.75 13H15.25C15.6642 13 16 12.6642 16 12.25C16 11.8358 15.6642 11.5 15.25 11.5H8.75ZM12 18.75C12 16.6789 10.3211 15 8.25 15L8.14823 15.0068C7.78215 15.0565 7.49997 15.3703 7.49997 15.75C7.49997 16.1642 7.83579 16.5 8.25 16.5L8.40405 16.5052C9.57484 16.5844 10.5 17.5591 10.5 18.75C10.5 19.9926 9.49264 21 8.25 21L8.24656 21.0046L8.14482 21.0119C7.77898 21.0633 7.49826 21.3783 7.49997 21.758C7.50191 22.1722 7.83923 22.5065 8.25344 22.5046V22.5L8.45228 22.4948C10.4276 22.3913 12 20.7543 12 18.75ZM5.5 15.75C5.5 15.3358 5.16421 15 4.75 15L4.55084 15.0052C2.57236 15.1087 1 16.7457 1 18.75C1 20.8211 2.67893 22.5 4.75 22.5L4.85177 22.4932C5.21785 22.4435 5.5 22.1297 5.5 21.75C5.5 21.3358 5.16421 21 4.75 21L4.59595 20.9948C3.42516 20.9156 2.5 19.9409 2.5 18.75C2.5 17.5074 3.50736 16.5 4.75 16.5L4.85177 16.4932C5.21785 16.4435 5.5 16.1297 5.5 15.75ZM9 18.75C9 18.3358 8.66421 18 8.25 18H4.75L4.64823 18.0068C4.28215 18.0565 4 18.3703 4 18.75C4 19.1642 4.33579 19.5 4.75 19.5H8.25L8.35177 19.4932C8.71785 19.4435 9 19.1297 9 18.75Z" 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/document_text_link_24_regular.svg";

Details

Keywords

paperworkfileanaloghorizontal