Xbox Controller icon
fluent-mdl2:xbox-controller
The Xbox Controller icon (fluent-mdl2:xbox-controller) is a free SVG icon from the Fluent UI MDL2 set by Microsoft Corporation. It is drawn on a 2048 × 2048 grid. Fluent UI MDL2 icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Fluent UI MDL2
- Author
- Microsoft Corporation
- License
- MIT
- Size
- 2048 × 2048
- Tags
- xboxcontroller
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="2048" height="2048" viewBox="0 0 2048 2048"><path fill="currentColor" d="M1728 480q17 14 31 31t26 38q35 68 64 139t59 142q37 92 70 186t52 193q8 44 13 88t5 89q0 59-13 115t-45 107q-15 22-37 44t-48 39t-56 28t-57 11q-31 0-69-27t-77-64t-71-76t-54-62q-22-25-46-55t-52-49l-24-17q-20-14-42-21t-46-10t-48-3t-47-1H785q-24 0-47 4t-46 10t-43 21l-24 17q-27 20-51 49t-47 55q-21 23-54 62t-71 76t-76 64t-70 27q-28 0-57-11t-55-28t-49-39t-37-44q-32-51-45-107T0 1386q0-45 5-89t13-88q8-46 23-100t36-114t43-120t48-119t49-110t46-96q11-20 25-37t32-33v-25q0-12 2-22t9-20t20-18q11-7 35-15t52-17t54-15t40-10q38-8 77-12t77-4q15 0 33 1t33 9h1q23 12 45 25t45 26h362q23-13 40-24t34-19t36-13t47-5q38 0 77 4t77 12q14 3 40 9t53 15t52 17t36 16q25 17 28 37t3 48m69 1120q36-10 60-32t38-51t19-63t6-67q0-39-4-78t-12-78q-20-106-58-208t-80-202q-23-54-45-108t-50-106q-8-15-20-23t-23-18t-20-20t-8-32v-20q-57-20-115-32t-119-12h-11q-6 0-11 1q-38 22-57 34t-37 18t-38 7t-61 1H897q-40 0-61-1t-38-7t-37-18t-57-34q-5-1-11-1t-11 0q-60 0-118 12t-116 32q0 28-5 44t-30 33q-11 6-20 15t-16 21q-28 51-50 105t-45 109q-41 99-79 201t-59 209q-8 38-12 77t-4 79q0 33 5 66t20 63t37 51t60 33q15-9 40-32t52-52t51-56t38-44q10-11 26-30t35-38t35-36t31-25q5-3 9-6t9-6q28-21 59-32t63-17t66-7t68-2h384q34 0 67 1t66 7t64 17t59 33q5 3 9 6t9 6q13 8 30 24t36 36t34 39t27 30q15 17 38 44t49 54t51 51t42 35m-773-960q26 0 45 19t19 45t-19 45t-45 19t-45-19t-19-45t19-45t45-19"/></svg>How to use the Xbox Controller icon
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-mdl2:xbox-controller" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-mdl2:xbox-controller" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-mdl2:xbox-controller" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-mdl2--xbox-controller]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-mdl2 -->
<div class="i-fluent-mdl2:xbox-controller"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-mdl2:xbox-controller"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/fluent-mdl2/xbox-controller.svg" alt="Xbox Controller icon" width="24" height="24">Xbox Controller icon FAQ
Is the Xbox Controller icon free for commercial use?
Yes. Fluent UI MDL2 icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Xbox Controller icon in React?
Install @iconify/react and render <Icon icon="fluent-mdl2:xbox-controller" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Xbox Controller icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fluent-mdl2/xbox-controller.svg" alt="Xbox Controller icon">, or paste the SVG code inline to style it with CSS.