Link Off icon

Use the Link Off 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 { LinkOff24Regular, LinkOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M2.21973 2.21973C2.51262 1.92684 2.98738 1.92684 3.28027 2.21973L21.7803 20.7197C22.073 21.0126 22.0729 21.4874 21.7803 21.7803C21.4874 22.0731 21.0126 22.073 20.7197 21.7803L15.9395 17H14.75C14.3358 17 14 16.6642 14 16.25C14 15.9283 14.2036 15.6554 14.4883 15.5488L11.6895 12.75H7C6.58581 12.75 6.25003 12.4142 6.25 12C6.25 11.6203 6.53237 11.3065 6.89844 11.2568L7 11.25H10.1895L7.43945 8.50001H7C5.067 8.50001 3.5 10.067 3.5 12C3.50003 13.8638 4.95688 15.3875 6.79395 15.4942L7 15.5H9.25C9.66421 15.5 10 15.8358 10 16.25C9.99997 16.6265 9.72199 16.9386 9.36035 16.9922L9.25 17H7C4.2386 17 2.00003 14.7614 2 12C2 9.56964 3.7339 7.54352 6.03223 7.09278L2.21973 3.28028C1.92685 2.98739 1.92687 2.51262 2.21973 2.21973ZM17 7.00001C19.7614 7.00001 22 9.23858 22 12C22 13.8475 20.9971 15.4596 19.5068 16.3252L18.3926 15.2109C19.6325 14.6725 20.5 13.4379 20.5 12C20.5 10.1362 19.0431 8.61252 17.2061 8.50587L17 8.50001H14.75C14.3358 8.50001 14 8.16419 14 7.75001C14 7.37345 14.278 7.06139 14.6396 7.00782L14.75 7.00001H17ZM17 11.25C17.4142 11.25 17.75 11.5858 17.75 12C17.75 12.3797 17.4676 12.6935 17.1016 12.7432L17 12.75H15.9316L14.4316 11.25H17Z" 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_off_24_regular.svg";

Details