Folder Link icon

Use the Folder 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 { FolderLink24Regular, FolderLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_folder_link_24_regular.svg" width="24" height="24" alt="Folder 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="M3.5 6.25V8H8.12868C8.32759 8 8.51836 7.92098 8.65901 7.78033L10.1893 6.25L8.65901 4.71967C8.51836 4.57902 8.32759 4.5 8.12868 4.5H5.25C4.2835 4.5 3.5 5.2835 3.5 6.25ZM2 6.25C2 4.45507 3.45507 3 5.25 3H8.12868C8.72542 3 9.29771 3.23705 9.71967 3.65901L11.5607 5.5H18.75C20.5449 5.5 22 6.95507 22 8.75V14.3766C21.5515 14.0576 21.0453 13.8145 20.5 13.6662V8.75C20.5 7.7835 19.7165 7 18.75 7H11.5607L9.71967 8.84099C9.29771 9.26295 8.72542 9.5 8.12868 9.5H3.5V17.75C3.5 18.7165 4.2835 19.5 5.25 19.5H11.1662C11.3145 20.0453 11.5576 20.5515 11.8766 21H5.25C3.45507 21 2 19.5449 2 17.75V6.25ZM23 18.25C23 16.1789 21.3211 14.5 19.25 14.5L19.1482 14.5068C18.7822 14.5565 18.5 14.8703 18.5 15.25C18.5 15.6642 18.8358 16 19.25 16L19.404 16.0052C20.5748 16.0844 21.5 17.0591 21.5 18.25C21.5 19.4926 20.4926 20.5 19.25 20.5L19.2466 20.5046L19.1448 20.5119C18.779 20.5633 18.4983 20.8783 18.5 21.258C18.5019 21.6722 18.8392 22.0065 19.2534 22.0046V22L19.4523 21.9948C21.4276 21.8913 23 20.2543 23 18.25ZM16.5 15.25C16.5 14.8358 16.1642 14.5 15.75 14.5L15.5508 14.5052C13.5724 14.6087 12 16.2457 12 18.25C12 20.3211 13.6789 22 15.75 22L15.8518 21.9932C16.2178 21.9435 16.5 21.6297 16.5 21.25C16.5 20.8358 16.1642 20.5 15.75 20.5L15.596 20.4948C14.4252 20.4156 13.5 19.4409 13.5 18.25C13.5 17.0074 14.5074 16 15.75 16L15.8518 15.9932C16.2178 15.9435 16.5 15.6297 16.5 15.25ZM20 18.25C20 17.8358 19.6642 17.5 19.25 17.5H15.75L15.6482 17.5068C15.2822 17.5565 15 17.8703 15 18.25C15 18.6642 15.3358 19 15.75 19H19.25L19.3518 18.9932C19.7178 18.9435 20 18.6297 20 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/folder_link_24_regular.svg";

Details

Keywords

analogcollection