xbox controller icon
xbox-controller-48-regular from Fluent UI System Icons by Microsoft Corporation · 48 Regular · MIT Free for personal and commercial use.
- Name
- xbox-controller-48-regular
- Set
- Fluent UI System Icons
- Style
- 48 Regular
- Viewbox
- 48×48
- License
- MIT
11 other variants in Fluent UI System Icons
Related icons in Fluent UI System Icons
Use the xbox controller icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M19.544 11.02c-1.06-.537-2.23-.623-3.302-.418l-2.244.43a5.74 5.74 0 0 0-4.032 3.032c-2.734 5.383-4.789 9.773-5.59 13.51c-.822 3.836-.35 7.102 2.044 10.082c1.6 1.991 4.403 1.595 5.86-.066a478 478 0 0 0 3.394-3.92A4.77 4.77 0 0 1 19.296 32h9.412a4.77 4.77 0 0 1 3.622 1.67a478 478 0 0 0 3.394 3.92c1.457 1.66 4.26 2.057 5.86.066c2.394-2.98 2.866-6.246 2.044-10.081c-.801-3.738-2.856-8.128-5.59-13.51a5.74 5.74 0 0 0-4.032-3.032l-2.244-.43c-1.072-.206-2.243-.12-3.302.417q-.31.156-.627.327c-.784.42-1.626.653-2.462.653h-2.738c-.836 0-1.678-.232-2.462-.653q-.318-.171-.627-.327m-2.831 2.038c.626-.12 1.219-.053 1.702.192q.279.141.573.3c1.1.59 2.344.95 3.645.95h2.738c1.3 0 2.546-.36 3.645-.95q.294-.159.573-.3c.483-.245 1.076-.312 1.702-.192l2.244.43c.981.188 1.824.82 2.274 1.708c2.756 5.426 4.652 9.533 5.375 12.903c.702 3.273.272 5.724-1.55 7.992c-.416.518-1.365.61-2.031-.15a474 474 0 0 1-3.375-3.899a7.27 7.27 0 0 0-5.52-2.542h-9.412c-2.125 0-4.14.933-5.52 2.542a473 473 0 0 1-3.375 3.899c-.666.76-1.615.668-2.032.15c-1.821-2.268-2.25-4.719-1.549-7.992c.723-3.37 2.619-7.477 5.374-12.903a3.24 3.24 0 0 1 2.275-1.708zM23.998 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></svg>
React
import type { SVGProps } from "react";
export function FluentXboxController48Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M19.544 11.02c-1.06-.537-2.23-.623-3.302-.418l-2.244.43a5.74 5.74 0 0 0-4.032 3.032c-2.734 5.383-4.789 9.773-5.59 13.51c-.822 3.836-.35 7.102 2.044 10.082c1.6 1.991 4.403 1.595 5.86-.066a478 478 0 0 0 3.394-3.92A4.77 4.77 0 0 1 19.296 32h9.412a4.77 4.77 0 0 1 3.622 1.67a478 478 0 0 0 3.394 3.92c1.457 1.66 4.26 2.057 5.86.066c2.394-2.98 2.866-6.246 2.044-10.081c-.801-3.738-2.856-8.128-5.59-13.51a5.74 5.74 0 0 0-4.032-3.032l-2.244-.43c-1.072-.206-2.243-.12-3.302.417q-.31.156-.627.327c-.784.42-1.626.653-2.462.653h-2.738c-.836 0-1.678-.232-2.462-.653q-.318-.171-.627-.327m-2.831 2.038c.626-.12 1.219-.053 1.702.192q.279.141.573.3c1.1.59 2.344.95 3.645.95h2.738c1.3 0 2.546-.36 3.645-.95q.294-.159.573-.3c.483-.245 1.076-.312 1.702-.192l2.244.43c.981.188 1.824.82 2.274 1.708c2.756 5.426 4.652 9.533 5.375 12.903c.702 3.273.272 5.724-1.55 7.992c-.416.518-1.365.61-2.031-.15a474 474 0 0 1-3.375-3.899a7.27 7.27 0 0 0-5.52-2.542h-9.412c-2.125 0-4.14.933-5.52 2.542a473 473 0 0 1-3.375 3.899c-.666.76-1.615.668-2.032.15c-1.821-2.268-2.25-4.719-1.549-7.992c.723-3.37 2.619-7.477 5.374-12.903a3.24 3.24 0 0 1 2.275-1.708zM23.998 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><path fill="currentColor" d="M19.544 11.02c-1.06-.537-2.23-.623-3.302-.418l-2.244.43a5.74 5.74 0 0 0-4.032 3.032c-2.734 5.383-4.789 9.773-5.59 13.51c-.822 3.836-.35 7.102 2.044 10.082c1.6 1.991 4.403 1.595 5.86-.066a478 478 0 0 0 3.394-3.92A4.77 4.77 0 0 1 19.296 32h9.412a4.77 4.77 0 0 1 3.622 1.67a478 478 0 0 0 3.394 3.92c1.457 1.66 4.26 2.057 5.86.066c2.394-2.98 2.866-6.246 2.044-10.081c-.801-3.738-2.856-8.128-5.59-13.51a5.74 5.74 0 0 0-4.032-3.032l-2.244-.43c-1.072-.206-2.243-.12-3.302.417q-.31.156-.627.327c-.784.42-1.626.653-2.462.653h-2.738c-.836 0-1.678-.232-2.462-.653q-.318-.171-.627-.327m-2.831 2.038c.626-.12 1.219-.053 1.702.192q.279.141.573.3c1.1.59 2.344.95 3.645.95h2.738c1.3 0 2.546-.36 3.645-.95q.294-.159.573-.3c.483-.245 1.076-.312 1.702-.192l2.244.43c.981.188 1.824.82 2.274 1.708c2.756 5.426 4.652 9.533 5.375 12.903c.702 3.273.272 5.724-1.55 7.992c-.416.518-1.365.61-2.031-.15a474 474 0 0 1-3.375-3.899a7.27 7.27 0 0 0-5.52-2.542h-9.412c-2.125 0-4.14.933-5.52 2.542a473 473 0 0 1-3.375 3.899c-.666.76-1.615.668-2.032.15c-1.821-2.268-2.25-4.719-1.549-7.992c.723-3.37 2.619-7.477 5.374-12.903a3.24 3.24 0 0 1 2.275-1.708zM23.998 21a2 2 0 1 0 0-4a2 2 0 0 0 0 4"/></svg> </template>
CSS
.icon-xbox-controller-48-regular {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M19.544%2011.02c-1.06-.537-2.23-.623-3.302-.418l-2.244.43a5.74%205.74%200%200%200-4.032%203.032c-2.734%205.383-4.789%209.773-5.59%2013.51c-.822%203.836-.35%207.102%202.044%2010.082c1.6%201.991%204.403%201.595%205.86-.066a478%20478%200%200%200%203.394-3.92A4.77%204.77%200%200%201%2019.296%2032h9.412a4.77%204.77%200%200%201%203.622%201.67a478%20478%200%200%200%203.394%203.92c1.457%201.66%204.26%202.057%205.86.066c2.394-2.98%202.866-6.246%202.044-10.081c-.801-3.738-2.856-8.128-5.59-13.51a5.74%205.74%200%200%200-4.032-3.032l-2.244-.43c-1.072-.206-2.243-.12-3.302.417q-.31.156-.627.327c-.784.42-1.626.653-2.462.653h-2.738c-.836%200-1.678-.232-2.462-.653q-.318-.171-.627-.327m-2.831%202.038c.626-.12%201.219-.053%201.702.192q.279.141.573.3c1.1.59%202.344.95%203.645.95h2.738c1.3%200%202.546-.36%203.645-.95q.294-.159.573-.3c.483-.245%201.076-.312%201.702-.192l2.244.43c.981.188%201.824.82%202.274%201.708c2.756%205.426%204.652%209.533%205.375%2012.903c.702%203.273.272%205.724-1.55%207.992c-.416.518-1.365.61-2.031-.15a474%20474%200%200%201-3.375-3.899a7.27%207.27%200%200%200-5.52-2.542h-9.412c-2.125%200-4.14.933-5.52%202.542a473%20473%200%200%201-3.375%203.899c-.666.76-1.615.668-2.032.15c-1.821-2.268-2.25-4.719-1.549-7.992c.723-3.37%202.619-7.477%205.374-12.903a3.24%203.24%200%200%201%202.275-1.708zM23.998%2021a2%202%200%201%200%200-4a2%202%200%200%200%200%204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M19.544%2011.02c-1.06-.537-2.23-.623-3.302-.418l-2.244.43a5.74%205.74%200%200%200-4.032%203.032c-2.734%205.383-4.789%209.773-5.59%2013.51c-.822%203.836-.35%207.102%202.044%2010.082c1.6%201.991%204.403%201.595%205.86-.066a478%20478%200%200%200%203.394-3.92A4.77%204.77%200%200%201%2019.296%2032h9.412a4.77%204.77%200%200%201%203.622%201.67a478%20478%200%200%200%203.394%203.92c1.457%201.66%204.26%202.057%205.86.066c2.394-2.98%202.866-6.246%202.044-10.081c-.801-3.738-2.856-8.128-5.59-13.51a5.74%205.74%200%200%200-4.032-3.032l-2.244-.43c-1.072-.206-2.243-.12-3.302.417q-.31.156-.627.327c-.784.42-1.626.653-2.462.653h-2.738c-.836%200-1.678-.232-2.462-.653q-.318-.171-.627-.327m-2.831%202.038c.626-.12%201.219-.053%201.702.192q.279.141.573.3c1.1.59%202.344.95%203.645.95h2.738c1.3%200%202.546-.36%203.645-.95q.294-.159.573-.3c.483-.245%201.076-.312%201.702-.192l2.244.43c.981.188%201.824.82%202.274%201.708c2.756%205.426%204.652%209.533%205.375%2012.903c.702%203.273.272%205.724-1.55%207.992c-.416.518-1.365.61-2.031-.15a474%20474%200%200%201-3.375-3.899a7.27%207.27%200%200%200-5.52-2.542h-9.412c-2.125%200-4.14.933-5.52%202.542a473%20473%200%200%201-3.375%203.899c-.666.76-1.615.668-2.032.15c-1.821-2.268-2.25-4.719-1.549-7.992c.723-3.37%202.619-7.477%205.374-12.903a3.24%203.24%200%200%201%202.275-1.708zM23.998%2021a2%202%200%201%200%200-4a2%202%200%200%200%200%204%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/xbox-controller-48-regular.svg?color=%231a73e8&size=48
