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 filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
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" />;
}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>Use it from the SVG package
Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:
npm install @fluentui/svg-icons
import icon from "@fluentui/svg-icons/icons/xbox_controller_24_regular.svg";Details
| Name | Xbox Controller |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_xbox_controller_24_regular.svg |
| Filled file | ic_fluent_xbox_controller_24_filled.svg |
| React components | XboxController24Regular, XboxController24Filled |
| License | MIT (© Microsoft Corporation) |