xbox controller icon
xbox-controller-20-regular from Fluent UI System Icons by Microsoft Corporation · 20 Regular · MIT Free for personal and commercial use.
- Name
- xbox-controller-20-regular
- Set
- Fluent UI System Icons
- Style
- 20 Regular
- Viewbox
- 20×20
- 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 20 20"><path fill="currentColor" d="M8.334 4.711a2.12 2.12 0 0 0-1.351-.17l-.894.17a2.37 2.37 0 0 0-1.666 1.245c-1.11 2.165-1.944 3.932-2.27 5.437c-.335 1.544-.146 2.86.82 4.061c.655.813 1.8.65 2.399-.026c.468-.527.997-1.136 1.513-1.732A2.01 2.01 0 0 1 8.404 13h3.186a2.01 2.01 0 0 1 1.52.697c.515.595 1.044 1.204 1.512 1.732c.599.676 1.744.838 2.399.025c.966-1.2 1.155-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37 2.37 0 0 0-1.666-1.245l-.894-.17a2.12 2.12 0 0 0-1.351.17l-.057.029c-.328.167-.673.26-1.015.26H9.406c-.342 0-.687-.093-1.015-.26zm-1.165.813c.263-.05.512-.022.716.08l.052.027c.444.226.945.369 1.469.369h1.182c.524 0 1.025-.143 1.469-.37l.052-.025c.204-.103.453-.13.716-.081l.894.17c.414.078.77.344.962.718c1.119 2.182 1.889 3.836 2.183 5.193c.286 1.319.114 2.308-.622 3.222c-.18.225-.587.26-.871-.062c-.464-.523-.991-1.128-1.505-1.723A3 3 0 0 0 11.59 12H8.404a3 3 0 0 0-2.276 1.042c-.514.595-1.04 1.2-1.505 1.723c-.284.321-.69.287-.87.062c-.737-.914-.91-1.903-.623-3.222c.294-1.357 1.064-3.011 2.183-5.193c.192-.374.548-.64.962-.718zM10 8.5A.75.75 0 1 0 10 7a.75.75 0 0 0 0 1.5"/></svg>
React
import type { SVGProps } from "react";
export function FluentXboxController20Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.334 4.711a2.12 2.12 0 0 0-1.351-.17l-.894.17a2.37 2.37 0 0 0-1.666 1.245c-1.11 2.165-1.944 3.932-2.27 5.437c-.335 1.544-.146 2.86.82 4.061c.655.813 1.8.65 2.399-.026c.468-.527.997-1.136 1.513-1.732A2.01 2.01 0 0 1 8.404 13h3.186a2.01 2.01 0 0 1 1.52.697c.515.595 1.044 1.204 1.512 1.732c.599.676 1.744.838 2.399.025c.966-1.2 1.155-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37 2.37 0 0 0-1.666-1.245l-.894-.17a2.12 2.12 0 0 0-1.351.17l-.057.029c-.328.167-.673.26-1.015.26H9.406c-.342 0-.687-.093-1.015-.26zm-1.165.813c.263-.05.512-.022.716.08l.052.027c.444.226.945.369 1.469.369h1.182c.524 0 1.025-.143 1.469-.37l.052-.025c.204-.103.453-.13.716-.081l.894.17c.414.078.77.344.962.718c1.119 2.182 1.889 3.836 2.183 5.193c.286 1.319.114 2.308-.622 3.222c-.18.225-.587.26-.871-.062c-.464-.523-.991-1.128-1.505-1.723A3 3 0 0 0 11.59 12H8.404a3 3 0 0 0-2.276 1.042c-.514.595-1.04 1.2-1.505 1.723c-.284.321-.69.287-.87.062c-.737-.914-.91-1.903-.623-3.222c.294-1.357 1.064-3.011 2.183-5.193c.192-.374.548-.64.962-.718zM10 8.5A.75.75 0 1 0 10 7a.75.75 0 0 0 0 1.5"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" d="M8.334 4.711a2.12 2.12 0 0 0-1.351-.17l-.894.17a2.37 2.37 0 0 0-1.666 1.245c-1.11 2.165-1.944 3.932-2.27 5.437c-.335 1.544-.146 2.86.82 4.061c.655.813 1.8.65 2.399-.026c.468-.527.997-1.136 1.513-1.732A2.01 2.01 0 0 1 8.404 13h3.186a2.01 2.01 0 0 1 1.52.697c.515.595 1.044 1.204 1.512 1.732c.599.676 1.744.838 2.399.025c.966-1.2 1.155-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37 2.37 0 0 0-1.666-1.245l-.894-.17a2.12 2.12 0 0 0-1.351.17l-.057.029c-.328.167-.673.26-1.015.26H9.406c-.342 0-.687-.093-1.015-.26zm-1.165.813c.263-.05.512-.022.716.08l.052.027c.444.226.945.369 1.469.369h1.182c.524 0 1.025-.143 1.469-.37l.052-.025c.204-.103.453-.13.716-.081l.894.17c.414.078.77.344.962.718c1.119 2.182 1.889 3.836 2.183 5.193c.286 1.319.114 2.308-.622 3.222c-.18.225-.587.26-.871-.062c-.464-.523-.991-1.128-1.505-1.723A3 3 0 0 0 11.59 12H8.404a3 3 0 0 0-2.276 1.042c-.514.595-1.04 1.2-1.505 1.723c-.284.321-.69.287-.87.062c-.737-.914-.91-1.903-.623-3.222c.294-1.357 1.064-3.011 2.183-5.193c.192-.374.548-.64.962-.718zM10 8.5A.75.75 0 1 0 10 7a.75.75 0 0 0 0 1.5"/></svg> </template>
CSS
.icon-xbox-controller-20-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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.334%204.711a2.12%202.12%200%200%200-1.351-.17l-.894.17a2.37%202.37%200%200%200-1.666%201.245c-1.11%202.165-1.944%203.932-2.27%205.437c-.335%201.544-.146%202.86.82%204.061c.655.813%201.8.65%202.399-.026c.468-.527.997-1.136%201.513-1.732A2.01%202.01%200%200%201%208.404%2013h3.186a2.01%202.01%200%200%201%201.52.697c.515.595%201.044%201.204%201.512%201.732c.599.676%201.744.838%202.399.025c.966-1.2%201.155-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37%202.37%200%200%200-1.666-1.245l-.894-.17a2.12%202.12%200%200%200-1.351.17l-.057.029c-.328.167-.673.26-1.015.26H9.406c-.342%200-.687-.093-1.015-.26zm-1.165.813c.263-.05.512-.022.716.08l.052.027c.444.226.945.369%201.469.369h1.182c.524%200%201.025-.143%201.469-.37l.052-.025c.204-.103.453-.13.716-.081l.894.17c.414.078.77.344.962.718c1.119%202.182%201.889%203.836%202.183%205.193c.286%201.319.114%202.308-.622%203.222c-.18.225-.587.26-.871-.062c-.464-.523-.991-1.128-1.505-1.723A3%203%200%200%200%2011.59%2012H8.404a3%203%200%200%200-2.276%201.042c-.514.595-1.04%201.2-1.505%201.723c-.284.321-.69.287-.87.062c-.737-.914-.91-1.903-.623-3.222c.294-1.357%201.064-3.011%202.183-5.193c.192-.374.548-.64.962-.718zM10%208.5A.75.75%200%201%200%2010%207a.75.75%200%200%200%200%201.5%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%2020%2020%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M8.334%204.711a2.12%202.12%200%200%200-1.351-.17l-.894.17a2.37%202.37%200%200%200-1.666%201.245c-1.11%202.165-1.944%203.932-2.27%205.437c-.335%201.544-.146%202.86.82%204.061c.655.813%201.8.65%202.399-.026c.468-.527.997-1.136%201.513-1.732A2.01%202.01%200%200%201%208.404%2013h3.186a2.01%202.01%200%200%201%201.52.697c.515.595%201.044%201.204%201.512%201.732c.599.676%201.744.838%202.399.025c.966-1.2%201.155-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37%202.37%200%200%200-1.666-1.245l-.894-.17a2.12%202.12%200%200%200-1.351.17l-.057.029c-.328.167-.673.26-1.015.26H9.406c-.342%200-.687-.093-1.015-.26zm-1.165.813c.263-.05.512-.022.716.08l.052.027c.444.226.945.369%201.469.369h1.182c.524%200%201.025-.143%201.469-.37l.052-.025c.204-.103.453-.13.716-.081l.894.17c.414.078.77.344.962.718c1.119%202.182%201.889%203.836%202.183%205.193c.286%201.319.114%202.308-.622%203.222c-.18.225-.587.26-.871-.062c-.464-.523-.991-1.128-1.505-1.723A3%203%200%200%200%2011.59%2012H8.404a3%203%200%200%200-2.276%201.042c-.514.595-1.04%201.2-1.505%201.723c-.284.321-.69.287-.87.062c-.737-.914-.91-1.903-.623-3.222c.294-1.357%201.064-3.011%202.183-5.193c.192-.374.548-.64.962-.718zM10%208.5A.75.75%200%201%200%2010%207a.75.75%200%200%200%200%201.5%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/xbox-controller-20-regular.svg?color=%231a73e8&size=48
