Fluent Icons

Accessibility icon

Used for accessibility checker and topics. The Accessibility 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
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_accessibility_24_regular.svg

Accessibility icon in React

npm install @fluentui/react-icons

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

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

Accessibility icon in SVG

npm install @fluentui/svg-icons

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

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

Accessibility icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Accessibility icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.accessibility_24_regular)

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

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

Accessibility 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_accessibility_24_regular"></i>

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

Accessibility icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_accessibility_24_regular

Accessibility icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .accessibility24Regular)

Accessibility 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 Accessibility 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 { Accessibility24Regular, Accessibility24Filled } from "@fluentui/react-icons";

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

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

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="M10.5 5C10.5 5.64117 10.9022 6.18838 11.4682 6.403C11.8174 6.48797 12.1822 6.48801 12.5315 6.4031C13.0975 6.18855 13.5 5.64127 13.5 5C13.5 4.17157 12.8284 3.5 12 3.5C11.1715 3.5 10.5 4.17157 10.5 5ZM9.02622 5.39876C9.0089 5.2683 8.99995 5.1352 8.99995 5C8.99995 3.34315 10.3431 2 12 2C13.6568 2 15 3.34315 15 5C15 5.13522 14.991 5.26835 14.9737 5.39883L17.8502 4.17784C18.9933 3.6926 20.318 4.2222 20.8116 5.36177C21.3069 6.50526 20.7776 7.82908 19.6306 8.31599L16.0025 9.85602V13.5732L17.8768 19.0167C18.2814 20.1916 17.6569 21.4721 16.4819 21.8766C15.307 22.2812 14.0266 21.6567 13.622 20.4818L12.0001 15.7715L10.3783 20.4815C9.97376 21.6565 8.69332 22.281 7.51838 21.8764C6.34344 21.4719 5.71892 20.1914 6.12349 19.0165L8.00247 13.5595V9.85809L4.3695 8.31599C3.22242 7.82908 2.69318 6.50526 3.18846 5.36177C3.68204 4.2222 5.00676 3.6926 6.1499 4.17784L9.02622 5.39876ZM11.022 7.83699C10.8569 7.79238 10.6941 7.73627 10.5348 7.66865L5.56381 5.55859C5.1793 5.39538 4.73092 5.57464 4.5649 5.95794C4.40058 6.33732 4.57503 6.77369 4.9556 6.93523L8.74088 8.54199C9.20262 8.73798 9.50247 9.19101 9.50247 9.69262V13.6014C9.50247 13.7399 9.47946 13.8774 9.43437 14.0083L7.54177 19.5048C7.40691 19.8965 7.61508 20.3233 8.00673 20.4581C8.39838 20.593 8.82519 20.3848 8.96004 19.9932L11.0684 13.8702C11.3739 12.9821 12.6275 12.9856 12.9318 13.8699L15.0403 19.9934C15.1751 20.3851 15.6019 20.5932 15.9936 20.4584C16.3852 20.3235 16.5934 19.8967 16.4585 19.5051L14.5706 14.022C14.5255 13.891 14.5025 13.7535 14.5025 13.615V9.69055C14.5025 9.18894 14.8023 8.73591 15.2641 8.53992L19.0445 6.93523C19.425 6.77369 19.5995 6.33732 19.4352 5.95794C19.2691 5.57464 18.8208 5.39538 18.4362 5.55859L13.4653 7.66865C13.3057 7.73636 13.1427 7.79254 12.9773 7.83718C12.671 7.9427 12.3422 8 12 8C11.6575 8 11.3285 7.94264 11.022 7.83699Z" fill="currentColor"/></svg>

Details

NameAccessibility
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_accessibility_24_regular.svg
Filled fileic_fluent_accessibility_24_filled.svg
React (Regular)Accessibility16Regular, Accessibility20Regular, Accessibility24Regular, Accessibility28Regular, Accessibility32Regular, Accessibility48Regular
React (Filled)Accessibility16Filled, Accessibility20Filled, Accessibility24Filled, Accessibility28Filled, Accessibility32Filled, Accessibility48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

person

Related icons

Accessibility CheckmarkAccessibility ErrorAccessibility MoreAccessibility Question MarkBriefcase PersonChart PersonClosed CaptionClosed Caption OffContact CardContact Card GenericContact Card GroupContact Card Link