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 regular and filled styles in 6 sizes from 16 to 48 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_plug_connected_24_regular.svg

Plug Connected icon in React

npm install @fluentui/react-icons

import { PlugConnected24Regular } from "@fluentui/react-icons";

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

Plug Connected icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/plug_connected_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/plug_connected_24_regular.svg" width="24" height="24" alt="Plug Connected">

Plug Connected icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.PlugConnected())" />

Plug Connected icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.plug_connected_24_regular)

Plug Connected icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xE99A;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xE99A;" FontSize="24" />

Plug Connected icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_plug_connected_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\e99a";
  font-size: 24px;
}

Plug Connected icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_plug_connected_24_regular" />

// Kotlin
R.drawable.ic_fluent_plug_connected_24_regular

Plug Connected icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .plugConnected24Regular)

Plug Connected icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NamePlug Connected
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_plug_connected_24_regular.svg
Filled fileic_fluent_plug_connected_24_filled.svg
React (Regular)PlugConnected16Regular, PlugConnected20Regular, PlugConnected24Regular, PlugConnected28Regular, PlugConnected32Regular, PlugConnected48Regular
React (Filled)PlugConnected16Filled, PlugConnected20Filled, PlugConnected24Filled, PlugConnected28Filled, PlugConnected32Filled, PlugConnected48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

connectpoweradd

Related icons