Router icon

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

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_router_24_regular.svg" width="24" height="24" alt="Router">

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="M12 3.5C7.85786 3.5 4.5 6.85786 4.5 11V11.25C4.5 11.6642 4.16421 12 3.75 12C3.33579 12 3 11.6642 3 11.25V11C3 6.02944 7.02944 2 12 2C16.9706 2 21 6.02944 21 11V11.25C21 11.6642 20.6642 12 20.25 12C19.8358 12 19.5 11.6642 19.5 11.25V11C19.5 6.85786 16.1421 3.5 12 3.5ZM12 6.5C9.51472 6.5 7.5 8.51472 7.5 11V11.25C7.5 11.6642 7.16421 12 6.75 12C6.33579 12 6 11.6642 6 11.25V11C6 7.68629 8.68629 5 12 5C15.3137 5 18 7.68629 18 11V11.25C18 11.6642 17.6642 12 17.25 12C16.8358 12 16.5 11.6642 16.5 11.25V11C16.5 8.51472 14.4853 6.5 12 6.5ZM12 8C10.3431 8 9 9.34315 9 11C9 12.3979 9.95608 13.5725 11.25 13.9055V16H6C4.34315 16 3 17.3431 3 19C3 20.6569 4.34315 22 6 22H18C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16H12.75V13.9055C14.0439 13.5725 15 12.3979 15 11C15 9.34315 13.6569 8 12 8ZM10.5 11C10.5 10.1716 11.1716 9.5 12 9.5C12.8284 9.5 13.5 10.1716 13.5 11C13.5 11.8284 12.8284 12.5 12 12.5C11.1716 12.5 10.5 11.8284 10.5 11ZM6 17.5H18C18.8284 17.5 19.5 18.1716 19.5 19C19.5 19.8284 18.8284 20.5 18 20.5H6C5.17157 20.5 4.5 19.8284 4.5 19C4.5 18.1716 5.17157 17.5 6 17.5Z" 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_24_regular.svg";

Details

Keywords

devicewifisignalstrengthconnection