Plug Connected icon
Used to represent connections - physical or with app add ins. The Plug Connected icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Plug 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 { PlugConnected24Regular, PlugConnected24Filled } from "@fluentui/react-icons";
export function Example() {
return <PlugConnected24Regular aria-label="Plug Connected" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_plug_connected_24_regular.svg" width="24" height="24" alt="Plug 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.4898 5.57084C20.2796 6.58684 20.7499 7.8635 20.7499 9.25001C20.7499 11.5333 19.4745 13.5187 17.5972 14.5327C16.9481 14.8833 16.1671 14.6672 15.6454 14.1455L9.85438 8.35451C9.33268 7.8328 9.1166 7.05181 9.46723 6.40265C10.4812 4.52541 12.4666 3.25001 14.7499 3.25001C16.1364 3.25001 17.4132 3.72034 18.4292 4.51016L20.7197 2.21967C21.0126 1.92678 21.4874 1.92678 21.7803 2.21967C22.0732 2.51256 22.0732 2.98744 21.7803 3.28033L19.4898 5.57084ZM17.4732 12.8331C18.5534 12.0106 19.2499 10.7106 19.2499 9.25001C19.2499 6.76473 17.2352 4.75001 14.7499 4.75001C13.2893 4.75001 11.9893 5.44648 11.1668 6.52671C10.9008 6.87593 10.9812 7.35998 11.2916 7.67036L16.3295 12.7083C16.6399 13.0187 17.124 13.0991 17.4732 12.8331ZM3.28033 21.7803L5.57072 19.4899C6.58673 20.2797 7.86339 20.75 9.24989 20.75C11.5332 20.75 13.5186 19.4746 14.5325 17.5973C14.8832 16.9482 14.6671 16.1672 14.1454 15.6455L8.35438 9.85448C7.83268 9.33278 7.05168 9.1167 6.40253 9.46733C4.52528 10.4813 3.24989 12.4667 3.24989 14.75C3.24989 16.1366 3.72022 17.4133 4.51005 18.4293L2.21967 20.7197C1.92678 21.0126 1.92678 21.4874 2.21967 21.7803C2.51256 22.0732 2.98744 22.0732 3.28033 21.7803ZM7.67023 11.2917L12.7082 16.3296C13.0186 16.64 13.0989 17.1241 12.833 17.4733C12.0105 18.5535 10.7105 19.25 9.24989 19.25C6.76461 19.25 4.74989 17.2353 4.74989 14.75C4.74989 13.2894 5.44635 11.9894 6.52659 11.1669C6.87581 10.9009 7.35985 10.9813 7.67023 11.2917Z" 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/plug_connected_24_regular.svg";Details
| Name | Plug Connected |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_plug_connected_24_regular.svg |
| Filled file | ic_fluent_plug_connected_24_filled.svg |
| React components | PlugConnected24Regular, PlugConnected24Filled |
| License | MIT (© Microsoft Corporation) |