Preview Link icon

Use the Preview 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 { PreviewLink24Regular, PreviewLink24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_preview_link_24_regular.svg" width="24" height="24" alt="Preview 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="M4.52393 6.25C4.52393 5.83579 4.85971 5.5 5.27393 5.5H18.7297C19.1439 5.5 19.4797 5.83579 19.4797 6.25V9.75C19.4797 10.1642 19.1439 10.5 18.7297 10.5H5.27393C4.85971 10.5 4.52393 10.1642 4.52393 9.75V6.25ZM6.02393 7V9H17.9797V7H6.02393ZM14.2297 11.979C13.8155 11.979 13.4797 12.3148 13.4797 12.729V17.229C13.4797 17.6432 13.8155 17.979 14.2297 17.979H18.7297C19.1439 17.979 19.4797 17.6432 19.4797 17.229V12.729C19.4797 12.3148 19.1439 11.979 18.7297 11.979H14.2297ZM14.9797 16.479V13.479H17.9797V16.479H14.9797ZM4.52393 13.25C4.52393 12.8358 4.85971 12.5 5.27393 12.5H11.25C11.6642 12.5 12 12.8358 12 13.25C12 13.6642 11.6642 14 11.25 14H5.27393C4.85971 14 4.52393 13.6642 4.52393 13.25ZM5.27393 16C4.85971 16 4.52393 16.3358 4.52393 16.75C4.52393 17.1642 4.85971 17.5 5.27393 17.5H11.25C11.6642 17.5 12 17.1642 12 16.75C12 16.3358 11.6642 16 11.25 16H5.27393ZM2 5.75C2 4.23122 3.23122 3 4.75 3H19.25C20.7688 3 22 4.23122 22 5.75V18.25C22 19.7688 20.7688 21 19.25 21H4.75C3.23122 21 2 19.7688 2 18.25V5.75ZM4.75 4.5C4.05964 4.5 3.5 5.05964 3.5 5.75V18.25C3.5 18.9404 4.05964 19.5 4.75 19.5H19.25C19.9404 19.5 20.5 18.9404 20.5 18.25V5.75C20.5 5.05964 19.9404 4.5 19.25 4.5H4.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/preview_link_24_regular.svg";

Details

Keywords

contentblockpreview