game controller icon
game-controller-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- game-controller-thin
- Set
- Phosphor
- Style
- Thin
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the game controller icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M176 108h-24a4 4 0 0 1 0-8h24a4 4 0 0 1 0 8m-72-8H92V88a4 4 0 0 0-8 0v12H72a4 4 0 0 0 0 8h12v12a4 4 0 0 0 8 0v-12h12a4 4 0 0 0 0-8m134.21 98.36a32 32 0 0 1-48.84 4.27l-.17-.18L148.29 156h-40.57l-40.91 46.44l-.18.19A32.08 32.08 0 0 1 44 212a32 32 0 0 1-31.5-37.56l16.37-84.23A55.87 55.87 0 0 1 83.89 44H172a56.07 56.07 0 0 1 55.1 46.1a.3.3 0 0 1 0 .1l16.37 84.16a31.86 31.86 0 0 1-5.26 24M172 148a48 48 0 1 0 0-96H83.9a47.9 47.9 0 0 0-47.16 39.67L20.36 175.9a24 24 0 0 0 19.48 27.73a24 24 0 0 0 21-6.58l42-47.69a4 4 0 0 1 3-1.36Zm63.63 27.83l-11-56.66A56.09 56.09 0 0 1 172 156h-13l36.16 41.06a24 24 0 0 0 40.52-21.23Z"/></svg>
React
import type { SVGProps } from "react";
export function PhGameControllerThin(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M176 108h-24a4 4 0 0 1 0-8h24a4 4 0 0 1 0 8m-72-8H92V88a4 4 0 0 0-8 0v12H72a4 4 0 0 0 0 8h12v12a4 4 0 0 0 8 0v-12h12a4 4 0 0 0 0-8m134.21 98.36a32 32 0 0 1-48.84 4.27l-.17-.18L148.29 156h-40.57l-40.91 46.44l-.18.19A32.08 32.08 0 0 1 44 212a32 32 0 0 1-31.5-37.56l16.37-84.23A55.87 55.87 0 0 1 83.89 44H172a56.07 56.07 0 0 1 55.1 46.1a.3.3 0 0 1 0 .1l16.37 84.16a31.86 31.86 0 0 1-5.26 24M172 148a48 48 0 1 0 0-96H83.9a47.9 47.9 0 0 0-47.16 39.67L20.36 175.9a24 24 0 0 0 19.48 27.73a24 24 0 0 0 21-6.58l42-47.69a4 4 0 0 1 3-1.36Zm63.63 27.83l-11-56.66A56.09 56.09 0 0 1 172 156h-13l36.16 41.06a24 24 0 0 0 40.52-21.23Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M176 108h-24a4 4 0 0 1 0-8h24a4 4 0 0 1 0 8m-72-8H92V88a4 4 0 0 0-8 0v12H72a4 4 0 0 0 0 8h12v12a4 4 0 0 0 8 0v-12h12a4 4 0 0 0 0-8m134.21 98.36a32 32 0 0 1-48.84 4.27l-.17-.18L148.29 156h-40.57l-40.91 46.44l-.18.19A32.08 32.08 0 0 1 44 212a32 32 0 0 1-31.5-37.56l16.37-84.23A55.87 55.87 0 0 1 83.89 44H172a56.07 56.07 0 0 1 55.1 46.1a.3.3 0 0 1 0 .1l16.37 84.16a31.86 31.86 0 0 1-5.26 24M172 148a48 48 0 1 0 0-96H83.9a47.9 47.9 0 0 0-47.16 39.67L20.36 175.9a24 24 0 0 0 19.48 27.73a24 24 0 0 0 21-6.58l42-47.69a4 4 0 0 1 3-1.36Zm63.63 27.83l-11-56.66A56.09 56.09 0 0 1 172 156h-13l36.16 41.06a24 24 0 0 0 40.52-21.23Z"/></svg> </template>
CSS
.icon-game-controller-thin {
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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176%20108h-24a4%204%200%200%201%200-8h24a4%204%200%200%201%200%208m-72-8H92V88a4%204%200%200%200-8%200v12H72a4%204%200%200%200%200%208h12v12a4%204%200%200%200%208%200v-12h12a4%204%200%200%200%200-8m134.21%2098.36a32%2032%200%200%201-48.84%204.27l-.17-.18L148.29%20156h-40.57l-40.91%2046.44l-.18.19A32.08%2032.08%200%200%201%2044%20212a32%2032%200%200%201-31.5-37.56l16.37-84.23A55.87%2055.87%200%200%201%2083.89%2044H172a56.07%2056.07%200%200%201%2055.1%2046.1a.3.3%200%200%201%200%20.1l16.37%2084.16a31.86%2031.86%200%200%201-5.26%2024M172%20148a48%2048%200%201%200%200-96H83.9a47.9%2047.9%200%200%200-47.16%2039.67L20.36%20175.9a24%2024%200%200%200%2019.48%2027.73a24%2024%200%200%200%2021-6.58l42-47.69a4%204%200%200%201%203-1.36Zm63.63%2027.83l-11-56.66A56.09%2056.09%200%200%201%20172%20156h-13l36.16%2041.06a24%2024%200%200%200%2040.52-21.23Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M176%20108h-24a4%204%200%200%201%200-8h24a4%204%200%200%201%200%208m-72-8H92V88a4%204%200%200%200-8%200v12H72a4%204%200%200%200%200%208h12v12a4%204%200%200%200%208%200v-12h12a4%204%200%200%200%200-8m134.21%2098.36a32%2032%200%200%201-48.84%204.27l-.17-.18L148.29%20156h-40.57l-40.91%2046.44l-.18.19A32.08%2032.08%200%200%201%2044%20212a32%2032%200%200%201-31.5-37.56l16.37-84.23A55.87%2055.87%200%200%201%2083.89%2044H172a56.07%2056.07%200%200%201%2055.1%2046.1a.3.3%200%200%201%200%20.1l16.37%2084.16a31.86%2031.86%200%200%201-5.26%2024M172%20148a48%2048%200%201%200%200-96H83.9a47.9%2047.9%200%200%200-47.16%2039.67L20.36%20175.9a24%2024%200%200%200%2019.48%2027.73a24%2024%200%200%200%2021-6.58l42-47.69a4%204%200%200%201%203-1.36Zm63.63%2027.83l-11-56.66A56.09%2056.09%200%200%201%20172%20156h-13l36.16%2041.06a24%2024%200%200%200%2040.52-21.23Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/game-controller-thin.svg?color=%231a73e8&size=48
