Connector icon

Use the Connector 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 { Connector24Regular, Connector24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M8.2516 4C8.6313 4 8.94509 4.28215 8.99475 4.64823L9.0016 4.75V7.52317L10.8759 10.3383C10.9374 10.4307 10.9773 10.5351 10.9935 10.6439L11.0016 10.754V15.25C11.0016 15.6297 10.7194 15.9435 10.3534 15.9932L10.2516 16H8.99791L8.99885 19.2536C8.99885 19.6678 8.66306 20.0036 8.24885 20.0036C7.86915 20.0036 7.55535 19.7214 7.50569 19.3553L7.49885 19.2536L7.49791 16L5.50291 15.999L5.5036 19.2566C5.5036 19.6708 5.16781 20.0066 4.7536 20.0066C4.3739 20.0066 4.06011 19.7244 4.01045 19.3584L4.0036 19.2566L4.00291 15.999L2.75391 16C2.37421 16 2.06042 15.7178 2.01075 15.3518L2.00391 15.25V10.754C2.00391 10.643 2.02851 10.534 2.07539 10.4344L2.12962 10.3383L4.00391 7.52317V4.75C4.00391 4.33579 4.33969 4 4.75391 4C5.1336 4 5.4474 4.28215 5.49706 4.64823L5.50391 4.75V7.75C5.50391 7.86093 5.4793 7.97001 5.43242 8.06956L5.3782 8.16564L3.50391 10.9808V14.5H9.5016V10.9808L7.62731 8.16564C7.56583 8.0733 7.52586 7.96887 7.50972 7.86003L7.5016 7.75V4.75C7.5016 4.33579 7.83739 4 8.2516 4ZM15.2562 4.00139H19.7516C20.1313 4.00139 20.4451 4.28355 20.4948 4.64962L20.5016 4.75139L20.5009 8H21.2516C21.6313 8 21.9451 8.28215 21.9948 8.64823L22.0016 8.75V13.246C22.0016 13.357 21.977 13.466 21.9301 13.5656L21.8759 13.6617L20.0016 16.4768V19.25C20.0016 19.6642 19.6658 20 19.2516 20C18.8719 20 18.5581 19.7178 18.5084 19.3518L18.5016 19.25V16.25C18.5016 16.1391 18.5262 16.03 18.5731 15.9304L18.6273 15.8344L20.5016 13.0192V9.5H14.5039V13.0192L16.3782 15.8344C16.4397 15.9267 16.4796 16.0311 16.4958 16.14L16.5039 16.25V19.25C16.5039 19.6642 16.1681 20 15.7539 20C15.3742 20 15.0604 19.7178 15.0108 19.3518L15.0039 19.25V16.4768L13.1296 13.6617C13.0681 13.5693 13.0282 13.4649 13.012 13.3561L13.0039 13.246V8.75C13.0039 8.3703 13.2861 8.05651 13.6521 8.00685L13.7539 8H14.5059L14.5062 4.75139C14.5062 4.3717 14.7883 4.0579 15.1544 4.00824L15.2562 4.00139H19.7516H15.2562ZM19.0016 5.50139H16.0062L16.0059 8H19.0009L19.0016 5.50139Z" 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/connector_24_regular.svg";

Details

Keywords

pointdirectionhorizontaldiagonal