Connected icon

Use the Connected 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 { Connected24Regular, Connected24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M19 2C20.6569 2 22 3.34315 22 5C22 6.65685 20.6569 8 19 8C18.4435 8 17.9243 7.84513 17.4775 7.58105L14.5811 10.4766C14.8454 10.9235 15 11.4432 15 12C15 12.5562 14.8449 13.0749 14.5811 13.5215L17.4775 16.418C17.9242 16.154 18.4436 16 19 16C20.6569 16 22 17.3431 22 19C22 20.6569 20.6569 22 19 22C17.3431 22 16 20.6569 16 19C16 18.4441 16.1535 17.9249 16.417 17.4785L13.5205 14.582C13.0742 14.8454 12.5558 15 12 15C11.4432 15 10.9235 14.8454 10.4766 14.5811L7.58105 17.4775C7.84513 17.9243 8 18.4435 8 19C8 20.6569 6.65685 22 5 22C3.34315 22 2 20.6569 2 19C2 17.3431 3.34315 16 5 16C5.55558 16 6.07429 16.1538 6.52051 16.417L9.41699 13.5195C9.15402 13.0735 9 12.5553 9 12C9 11.4441 9.15349 10.9249 9.41699 10.4785L6.52051 7.58203C6.07419 7.84543 5.55576 8 5 8C3.34315 8 2 6.65685 2 5C2 3.34315 3.34315 2 5 2C6.65685 2 8 3.34315 8 5C8 5.55624 7.84487 6.07491 7.58105 6.52148L10.4775 9.41797C10.9242 9.15405 11.4436 9 12 9C12.5553 9 13.0735 9.15402 13.5195 9.41699L16.417 6.52051C16.1538 6.07429 16 5.55558 16 5C16 3.34315 17.3431 2 19 2ZM5 17.5C4.17157 17.5 3.5 18.1716 3.5 19C3.5 19.8284 4.17157 20.5 5 20.5C5.82843 20.5 6.5 19.8284 6.5 19C6.5 18.1716 5.82843 17.5 5 17.5ZM19 17.5C18.1716 17.5 17.5 18.1716 17.5 19C17.5 19.8284 18.1716 20.5 19 20.5C19.8284 20.5 20.5 19.8284 20.5 19C20.5 18.1716 19.8284 17.5 19 17.5ZM12 10.5C11.1716 10.5 10.5 11.1716 10.5 12C10.5 12.8284 11.1716 13.5 12 13.5C12.8284 13.5 13.5 12.8284 13.5 12C13.5 11.1716 12.8284 10.5 12 10.5ZM5 3.5C4.17157 3.5 3.5 4.17157 3.5 5C3.5 5.82843 4.17157 6.5 5 6.5C5.82843 6.5 6.5 5.82843 6.5 5C6.5 4.17157 5.82843 3.5 5 3.5ZM19 3.5C18.1716 3.5 17.5 4.17157 17.5 5C17.5 5.82843 18.1716 6.5 19 6.5C19.8284 6.5 20.5 5.82843 20.5 5C20.5 4.17157 19.8284 3.5 19 3.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/connected_24_regular.svg";

Details

Keywords

xstarapps