xbox controller icon
xbox-controller-20-filled from Fluent UI System Icons by Microsoft Corporation · 20 Filled · MIT Free for personal and commercial use.
- Name
- xbox-controller-20-filled
- Set
- Fluent UI System Icons
- Style
- 20 Filled
- 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.35-.17l-.895.17a2.37 2.37 0 0 0-1.665 1.245c-1.11 2.165-1.944 3.932-2.27 5.437c-.336 1.544-.147 2.86.82 4.061c.654.813 1.8.65 2.399-.026c.467-.527.997-1.136 1.512-1.732A2.01 2.01 0 0 1 8.405 13h3.186a2.01 2.01 0 0 1 1.519.697a203 203 0 0 0 1.513 1.732c.598.676 1.744.838 2.398.025c.967-1.2 1.156-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37 2.37 0 0 0-1.665-1.245l-.894-.17a2.12 2.12 0 0 0-1.351.17l-.058.029c-.327.167-.672.26-1.014.26H9.406a2.24 2.24 0 0 1-1.014-.26zM10 8.5A.75.75 0 1 1 10 7a.75.75 0 0 1 0 1.5"/></svg>
React
import type { SVGProps } from "react";
export function FluentXboxController20Filled(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.35-.17l-.895.17a2.37 2.37 0 0 0-1.665 1.245c-1.11 2.165-1.944 3.932-2.27 5.437c-.336 1.544-.147 2.86.82 4.061c.654.813 1.8.65 2.399-.026c.467-.527.997-1.136 1.512-1.732A2.01 2.01 0 0 1 8.405 13h3.186a2.01 2.01 0 0 1 1.519.697a203 203 0 0 0 1.513 1.732c.598.676 1.744.838 2.398.025c.967-1.2 1.156-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37 2.37 0 0 0-1.665-1.245l-.894-.17a2.12 2.12 0 0 0-1.351.17l-.058.029c-.327.167-.672.26-1.014.26H9.406a2.24 2.24 0 0 1-1.014-.26zM10 8.5A.75.75 0 1 1 10 7a.75.75 0 0 1 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.35-.17l-.895.17a2.37 2.37 0 0 0-1.665 1.245c-1.11 2.165-1.944 3.932-2.27 5.437c-.336 1.544-.147 2.86.82 4.061c.654.813 1.8.65 2.399-.026c.467-.527.997-1.136 1.512-1.732A2.01 2.01 0 0 1 8.405 13h3.186a2.01 2.01 0 0 1 1.519.697a203 203 0 0 0 1.513 1.732c.598.676 1.744.838 2.398.025c.967-1.2 1.156-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37 2.37 0 0 0-1.665-1.245l-.894-.17a2.12 2.12 0 0 0-1.351.17l-.058.029c-.327.167-.672.26-1.014.26H9.406a2.24 2.24 0 0 1-1.014-.26zM10 8.5A.75.75 0 1 1 10 7a.75.75 0 0 1 0 1.5"/></svg> </template>
CSS
.icon-xbox-controller-20-filled {
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.35-.17l-.895.17a2.37%202.37%200%200%200-1.665%201.245c-1.11%202.165-1.944%203.932-2.27%205.437c-.336%201.544-.147%202.86.82%204.061c.654.813%201.8.65%202.399-.026c.467-.527.997-1.136%201.512-1.732A2.01%202.01%200%200%201%208.405%2013h3.186a2.01%202.01%200%200%201%201.519.697a203%20203%200%200%200%201.513%201.732c.598.676%201.744.838%202.398.025c.967-1.2%201.156-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37%202.37%200%200%200-1.665-1.245l-.894-.17a2.12%202.12%200%200%200-1.351.17l-.058.029c-.327.167-.672.26-1.014.26H9.406a2.24%202.24%200%200%201-1.014-.26zM10%208.5A.75.75%200%201%201%2010%207a.75.75%200%200%201%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.35-.17l-.895.17a2.37%202.37%200%200%200-1.665%201.245c-1.11%202.165-1.944%203.932-2.27%205.437c-.336%201.544-.147%202.86.82%204.061c.654.813%201.8.65%202.399-.026c.467-.527.997-1.136%201.512-1.732A2.01%202.01%200%200%201%208.405%2013h3.186a2.01%202.01%200%200%201%201.519.697a203%20203%200%200%200%201.513%201.732c.598.676%201.744.838%202.398.025c.967-1.2%201.156-2.517.82-4.06c-.326-1.506-1.16-3.273-2.27-5.438a2.37%202.37%200%200%200-1.665-1.245l-.894-.17a2.12%202.12%200%200%200-1.351.17l-.058.029c-.327.167-.672.26-1.014.26H9.406a2.24%202.24%200%200%201-1.014-.26zM10%208.5A.75.75%200%201%201%2010%207a.75.75%200%200%201%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-filled.svg?color=%231a73e8&size=48
