Connector icon

Used in generic, physical connection scenarios. The Connector icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 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_connector_24_regular.svg

Connector icon in React

npm install @fluentui/react-icons

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

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

Connector icon in SVG

npm install @fluentui/svg-icons

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

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

Connector icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Connector icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.connector_24_regular)

Connector 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="&#xF31E;" FontSize="24" />

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

Connector 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_connector_24_regular"></i>

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

Connector icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_connector_24_regular

Connector icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .connector24Regular)

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

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_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>

Details

NameConnector
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_connector_24_regular.svg
Filled fileic_fluent_connector_24_filled.svg
React (Regular)Connector16Regular, Connector20Regular, Connector24Regular
React (Filled)Connector16Filled, Connector20Filled, Connector24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

pointdirectionhorizontaldiagonal

Related icons