Slide Link icon

Use the Slide 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 { SlideLink24Regular, SlideLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_slide_link_24_regular.svg" width="24" height="24" alt="Slide 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="M19.25 13.5C21.3211 13.5 23 15.1789 23 17.25C23 19.2543 21.4275 20.8916 19.4521 20.9951L19.2539 21V21.0049C18.8397 21.0067 18.5019 20.672 18.5 20.2578C18.4984 19.8783 18.7789 19.5632 19.1445 19.5117L19.2461 19.5049L19.25 19.5C20.4926 19.5 21.5 18.4926 21.5 17.25C21.5 16.0592 20.575 15.0842 19.4043 15.0049L19.25 15C18.8358 15 18.5 14.6642 18.5 14.25C18.5 13.8703 18.7824 13.5565 19.1484 13.5068L19.25 13.5ZM15.75 13.5C16.1642 13.5 16.5 13.8358 16.5 14.25C16.5 14.6297 16.2176 14.9435 15.8516 14.9932L15.75 15C14.5074 15 13.5 16.0074 13.5 17.25C13.5 18.4408 14.425 19.4158 15.5957 19.4951L15.75 19.5C16.1642 19.5 16.5 19.8358 16.5 20.25C16.5 20.6297 16.2176 20.9435 15.8516 20.9932L15.75 21C13.6789 21 12 19.3211 12 17.25C12 15.2458 13.5723 13.6084 15.5508 13.5049L15.75 13.5ZM18.75 4C20.5449 4 22 5.45507 22 7.25V13.3779C21.5514 13.0588 21.0455 12.8154 20.5 12.667V7.25C20.5 6.2835 19.7165 5.5 18.75 5.5H5.25C4.2835 5.5 3.5 6.2835 3.5 7.25V16.75C3.5 17.7165 4.2835 18.5 5.25 18.5H11.167C11.3154 19.0455 11.5588 19.5514 11.8779 20H5.25C3.45507 20 2 18.5449 2 16.75V7.25C2 5.45507 3.45507 4 5.25 4H18.75ZM19.25 16.5C19.6642 16.5 20 16.8358 20 17.25C20 17.6297 19.7176 17.9435 19.3516 17.9932L19.25 18H15.75C15.3358 18 15 17.6642 15 17.25C15 16.8703 15.2824 16.5565 15.6484 16.5068L15.75 16.5H19.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/slide_link_24_regular.svg";

Details

Keywords

rectangle