Fluent Icons

Xbox Controller icon

Used to represent an Xbox console controller. The Xbox Controller 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_xbox_controller_24_regular.svg

Xbox Controller icon in React

npm install @fluentui/react-icons

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

export function Example() {
  return <XboxController24Regular aria-label="Xbox Controller" />;
}

Xbox Controller icon in SVG

npm install @fluentui/svg-icons

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

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

Xbox Controller icon in Blazor

Microsoft's Fluent UI Blazor icons package:

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

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

Xbox Controller icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.xbox_controller_24_regular)

Xbox Controller 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="&#xEEB9;" FontSize="24" />

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

Xbox Controller 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_xbox_controller_24_regular"></i>

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

Xbox Controller icon in Android

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

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

// Kotlin
R.drawable.ic_fluent_xbox_controller_24_regular

Xbox Controller icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .xboxController24Regular)

Xbox Controller 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 Xbox Controller 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 { XboxController24Regular, XboxController24Filled } from "@fluentui/react-icons";

export function Example() {
  return <XboxController24Regular aria-label="Xbox Controller" />;
}

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_xbox_controller_24_regular.svg" width="24" height="24" alt="Xbox Controller">

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="M9.80826 5.50769C9.2793 5.24329 8.69852 5.20153 8.1698 5.30227L6.98717 5.52759C6.12539 5.69179 5.38365 6.24525 4.98331 7.02794C3.61632 9.70048 2.58269 11.8895 2.18399 13.7567C1.77278 15.6826 2.02418 17.3319 3.2632 18.8331C4.08481 19.8286 5.49285 19.6274 6.22669 18.797C6.78546 18.1647 7.42172 17.4325 8.04401 16.7109C8.45381 16.2357 9.04867 15.9623 9.67372 15.9623H14.3294C14.9545 15.9623 15.5493 16.2357 15.9591 16.7109C16.5814 17.4325 17.2177 18.1647 17.7764 18.797C18.5103 19.6274 19.9183 19.8286 20.7399 18.8331C21.9789 17.3319 22.2304 15.6826 21.8191 13.7567C21.4204 11.8895 20.3868 9.70048 19.0198 7.02794C18.6195 6.24525 17.8777 5.69179 17.016 5.52759L15.8333 5.30227C15.3046 5.20153 14.7238 5.24329 14.1949 5.50769C14.0512 5.57949 13.9039 5.65667 13.7554 5.73714C13.4002 5.92964 13.0191 6.03382 12.6424 6.03382H11.3607C10.984 6.03382 10.6029 5.92964 10.2477 5.73714C10.0992 5.65667 9.9519 5.57949 9.80826 5.50769ZM8.43715 6.70549C8.71249 6.65303 8.96637 6.68386 9.16957 6.78543C9.29676 6.84901 9.42995 6.91871 9.56709 6.99304C10.1066 7.28543 10.7198 7.46228 11.3607 7.46228H12.6424C13.2834 7.46228 13.8965 7.28543 14.436 6.99304C14.5732 6.91871 14.7064 6.84901 14.8336 6.78543C15.0368 6.68386 15.2906 6.65303 15.566 6.70549L16.7486 6.93082C17.1792 7.01286 17.5493 7.28983 17.7481 7.67844C19.1283 10.3769 20.0691 12.4017 20.4222 14.055C20.7627 15.6497 20.543 16.8276 19.6382 17.9239C19.5509 18.0297 19.4318 18.0792 19.2901 18.0728C19.1404 18.066 18.973 17.9939 18.8468 17.8511C18.2934 17.2248 17.6613 16.4974 17.0409 15.778C16.3613 14.99 15.3724 14.5338 14.3294 14.5338H9.67372C8.63075 14.5338 7.64183 14.99 6.96226 15.778C6.34182 16.4974 5.70972 17.2248 5.15628 17.8511C5.03013 17.9939 4.86276 18.066 4.713 18.0728C4.57138 18.0792 4.45225 18.0297 4.36491 17.9239C3.46011 16.8276 3.24047 15.6497 3.58097 14.055C3.93399 12.4017 4.87484 10.3769 6.25507 7.67844C6.45384 7.28983 6.82393 7.01286 7.25453 6.93082L8.43715 6.70549ZM12.0013 11.0004C12.5536 11.0004 13.0013 10.5527 13.0013 10.0004C13.0013 9.44814 12.5536 9.00043 12.0013 9.00043C11.4491 9.00043 11.0013 9.44814 11.0013 10.0004C11.0013 10.5527 11.4491 11.0004 12.0013 11.0004Z" fill="currentColor"/></svg>

Details

NameXbox Controller
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px, 32 px, 48 px
Regular (outlined) fileic_fluent_xbox_controller_24_regular.svg
Filled fileic_fluent_xbox_controller_24_filled.svg
React (Regular)XboxController16Regular, XboxController20Regular, XboxController24Regular, XboxController28Regular, XboxController32Regular, XboxController48Regular
React (Filled)XboxController16Filled, XboxController20Filled, XboxController24Filled, XboxController28Filled, XboxController32Filled, XboxController48Filled
LicenseMIT (© Microsoft Corporation)

Keywords

play

Related icons

Xbox Controller ErrorXbox ConsoleJoystickGame Controller Bumper LeftGame Controller Bumper RightGame Controller Button AGame Controller Button BGame Controller Button XGame Controller Button YGame Controller Trigger LeftGame Controller Trigger RightGames