Router Off icon

Use the Router 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 { RouterOff24Regular, RouterOff24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_router_off_24_regular.svg" width="24" height="24" alt="Router 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.51263 1.92687 2.9874 1.92685 3.28028 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.7803L20.0869 21.1475C19.5476 21.6737 18.8133 22 18 22H6C4.34315 22 3 20.6569 3 19C3 17.3431 4.34315 16 6 16H11.25V13.9053C9.95611 13.5722 9.00001 12.3979 9.00001 11C9.00001 10.7142 9.04089 10.4382 9.11622 10.1768L7.95997 9.02051C7.66656 9.61809 7.50001 10.2893 7.50001 11V11.25C7.50001 11.6642 7.16419 12 6.75001 12C6.33579 12 6 11.6642 6 11.25V11C6 9.87148 6.31233 8.8164 6.8545 7.91504L5.76758 6.82812C4.96762 8.02109 4.5 9.45575 4.5 11V11.25C4.5 11.6642 4.16419 12 3.75 12C3.33579 12 3 11.6642 3 11.25V11C3 9.04061 3.62621 7.22761 4.68946 5.75L2.21973 3.28027C1.92684 2.98738 1.92684 2.51262 2.21973 2.21973ZM6 17.5C5.17158 17.5 4.5 18.1716 4.5 19C4.5 19.8284 5.17158 20.5 6 20.5H18C18.399 20.5 18.76 20.343 19.0283 20.0889L16.4395 17.5H6ZM12.75 13.9053V16H14.9395L12.8223 13.8828C12.7981 13.8897 12.7745 13.899 12.75 13.9053ZM12 5C15.3137 5.00003 18 7.68631 18 11V11.25C18 11.6642 17.6642 12 17.25 12C16.8358 12 16.5 11.6642 16.5 11.25V11C16.5 8.51474 14.4853 6.50003 12 6.5C11.3214 6.5 10.6776 6.64994 10.1006 6.91895L8.99024 5.80859C9.87498 5.29456 10.9031 5 12 5ZM12 2C16.9705 2.00003 21 6.02946 21 11V11.25C21 11.6642 20.6642 12 20.25 12C19.8358 12 19.5 11.6642 19.5 11.25V11C19.5 6.85788 16.1421 3.50003 12 3.5C10.4871 3.5 9.07962 3.94922 7.90137 4.71973L6.82227 3.64062C8.28687 2.60831 10.072 2 12 2ZM12 8C13.6568 8.00003 15 9.34317 15 11C15 11.2511 14.9673 11.4945 14.9092 11.7275L11.2734 8.0918C11.5063 8.03382 11.7492 8 12 8Z" 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/router_off_24_regular.svg";

Details