Fluent Icons

Attach icon

Used to represent files attached to communications. The Attach icon is part of Microsoft's Fluent UI System Icons, available here in regular, filled and light styles in 7 sizes from 12 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
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

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_attach_24_regular.svg

Attach icon in React

npm install @fluentui/react-icons

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

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

Attach icon in SVG

npm install @fluentui/svg-icons

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

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

Attach icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Attach icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.attach_24_regular)

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

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

Attach 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_attach_24_regular"></i>

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

Attach icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_attach_24_regular

Attach icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .attach24Regular)

Attach 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 Attach 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 { Attach24Regular, Attach24Filled } from "@fluentui/react-icons";

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

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_attach_24_regular.svg" width="24" height="24" alt="Attach">

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="M11.7722 3.74407C14.1136 1.40049 17.9126 1.40049 20.2558 3.74363C22.5388 6.0267 22.5974 9.69191 20.4314 12.0458L20.2432 12.2432L11.4432 21.0414L11.4066 21.0717C9.94541 22.3884 7.69141 22.3437 6.28404 20.9363C4.96502 19.6173 4.8429 17.5546 5.91769 16.0979C5.94103 16.0525 5.96928 16.0088 6.00249 15.9677L6.05605 15.908L6.14295 15.8203L6.28404 15.6724L6.28695 15.6753L13.7227 8.22096C13.9886 7.95434 14.4052 7.92958 14.6991 8.14704L14.7834 8.21955C15.05 8.48546 15.0747 8.90209 14.8573 9.19599L14.7848 9.28021L7.19015 16.8933C6.47251 17.7689 6.52239 19.0632 7.33979 19.8806C8.16885 20.7096 9.4885 20.7491 10.3643 19.999L19.197 11.1685C20.9525 9.41089 20.9525 6.56165 19.1951 4.80429C17.4927 3.10185 14.7655 3.04865 12.999 4.64469L12.8312 4.80429L12.8186 4.8186L3.28228 14.3549C2.98939 14.6478 2.51452 14.6478 2.22162 14.3549C1.95536 14.0887 1.93115 13.672 2.149 13.3784L2.22162 13.2943L11.7705 3.74363L11.7722 3.74407Z" fill="currentColor"/></svg>

Details

NameAttach
StylesRegular (outlined), Filled, Light
Sizes12 px, 16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_attach_24_regular.svg
Filled fileic_fluent_attach_24_filled.svg
React (Regular)Attach12Regular, Attach16Regular, Attach20Regular, Attach24Regular, Attach28Regular, Attach32Regular, Attach48Regular
React (Filled)Attach12Filled, Attach16Filled, Attach20Filled, Attach24Filled, Attach28Filled, Attach32Filled, Attach48Filled
React (Light)Attach32Light
LicenseMIT (© Microsoft Corporation)

Keywords

fileshare

Related icons

Attach Arrow RightAttach TextMail AttachDocument Arrow RightDocument CopyCastCast MultipleChannel ShareComment LinkCommunicationCommunication PersonCommunication Shield