Link Multiple icon

Use the Link Multiple 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 { LinkMultiple24Regular, LinkMultiple24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_link_multiple_24_regular.svg" width="24" height="24" alt="Link Multiple">

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="M6.25 4C3.3505 4 1 6.35051 1 9.25C1 11.5533 2.48322 13.5101 4.54662 14.2175C4.60778 13.7077 4.72795 13.2161 4.90008 12.7497C3.49602 12.2077 2.5 10.8452 2.5 9.25C2.5 7.17893 4.17893 5.5 6.25 5.5H12.75C14.8211 5.5 16.5 7.17893 16.5 9.25C16.5 11.3211 14.8211 13 12.75 13H11.75C11.3358 13 11 13.3358 11 13.75C11 14.1642 11.3358 14.5 11.75 14.5H12.75C15.6495 14.5 18 12.1495 18 9.25C18 6.35051 15.6495 4 12.75 4H6.25ZM19.3907 10.196C19.2977 10.6963 19.1473 11.1765 18.9467 11.6295C20.4198 12.0424 21.5 13.3951 21.5 15C21.5 16.933 19.933 18.5 18 18.5H11C9.067 18.5 7.5 16.933 7.5 15C7.5 13.067 9.067 11.5 11 11.5H12.25C12.6642 11.5 13 11.1642 13 10.75C13 10.3358 12.6642 10 12.25 10H11C8.23858 10 6 12.2386 6 15C6 17.7614 8.23858 20 11 20H18C20.7614 20 23 17.7614 23 15C23 12.7212 21.4755 10.7984 19.3907 10.196Z" 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/link_multiple_24_regular.svg";

Details

Keywords

linksharewebinternet