xbox icon

xbox from IonIcons by Ben Sperry · Regular · MIT Free for personal and commercial use.

Name: xbox
Set: IonIcons
Style: Regular
Viewbox: 512×512
License: MIT

The same icon in other sets

xboxBootstrap Icons xboxBoxicons Brands xboxCoreUI Brands xboxFont Awesome 6 Brands xboxFont Awesome Brands xboxLine Awesome xbox-fillMingCute Icon xbox-fillRemix Icon xboxSimple Icons

Use the xbox icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M126.8 248.3c39.7-58.6 77.9-92.8 77.9-92.8s-42.1-48.9-92.8-67.4l-3.3-.8C61.7 128.4 32 188.7 32 256c0 50.7 16.9 97.5 45.2 135 0-4.4.6-70.3 49.6-142.7z" fill="currentColor"/><path d="M480 256c0-67.3-29.7-127.6-76.6-168.7l-3.2.9c-50.7 18.5-92.9 67.4-92.9 67.4s38.2 34.2 77.9 92.8c49 72.4 49.6 138.3 49.5 142.7C463.2 353.5 480 306.7 480 256z" fill="currentColor"/><path d="M201.2 80.9c29.3 13.1 54.6 34.6 54.6 34.6s25.5-21.4 54.8-34.6c36.8-16.5 64.9-11.3 72.3-9.5C346.8 46.6 303.1 32 256 32c-47.1 0-90.8 14.6-126.9 39.4 7.2-1.8 35.2-7.1 72.1 9.5z" fill="currentColor"/><path d="M358.7 292.9C312.4 236 255.8 199 255.8 199s-56.3 37-102.7 93.9c-39.8 48.9-54.6 84.8-62.6 107.8l-1.3 4.8c41 45.7 100.5 74.5 166.8 74.5 66.3 0 125.8-28.8 166.8-74.5l-1.4-4.8c-8-23-22.9-58.9-62.7-107.8z" fill="currentColor"/></svg>

React

import type { SVGProps } from "react";

export function IonXbox(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M126.8 248.3c39.7-58.6 77.9-92.8 77.9-92.8s-42.1-48.9-92.8-67.4l-3.3-.8C61.7 128.4 32 188.7 32 256c0 50.7 16.9 97.5 45.2 135 0-4.4.6-70.3 49.6-142.7z" fill="currentColor"/><path d="M480 256c0-67.3-29.7-127.6-76.6-168.7l-3.2.9c-50.7 18.5-92.9 67.4-92.9 67.4s38.2 34.2 77.9 92.8c49 72.4 49.6 138.3 49.5 142.7C463.2 353.5 480 306.7 480 256z" fill="currentColor"/><path d="M201.2 80.9c29.3 13.1 54.6 34.6 54.6 34.6s25.5-21.4 54.8-34.6c36.8-16.5 64.9-11.3 72.3-9.5C346.8 46.6 303.1 32 256 32c-47.1 0-90.8 14.6-126.9 39.4 7.2-1.8 35.2-7.1 72.1 9.5z" fill="currentColor"/><path d="M358.7 292.9C312.4 236 255.8 199 255.8 199s-56.3 37-102.7 93.9c-39.8 48.9-54.6 84.8-62.6 107.8l-1.3 4.8c41 45.7 100.5 74.5 166.8 74.5 66.3 0 125.8-28.8 166.8-74.5l-1.4-4.8c-8-23-22.9-58.9-62.7-107.8z" fill="currentColor"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path d="M126.8 248.3c39.7-58.6 77.9-92.8 77.9-92.8s-42.1-48.9-92.8-67.4l-3.3-.8C61.7 128.4 32 188.7 32 256c0 50.7 16.9 97.5 45.2 135 0-4.4.6-70.3 49.6-142.7z" fill="currentColor"/><path d="M480 256c0-67.3-29.7-127.6-76.6-168.7l-3.2.9c-50.7 18.5-92.9 67.4-92.9 67.4s38.2 34.2 77.9 92.8c49 72.4 49.6 138.3 49.5 142.7C463.2 353.5 480 306.7 480 256z" fill="currentColor"/><path d="M201.2 80.9c29.3 13.1 54.6 34.6 54.6 34.6s25.5-21.4 54.8-34.6c36.8-16.5 64.9-11.3 72.3-9.5C346.8 46.6 303.1 32 256 32c-47.1 0-90.8 14.6-126.9 39.4 7.2-1.8 35.2-7.1 72.1 9.5z" fill="currentColor"/><path d="M358.7 292.9C312.4 236 255.8 199 255.8 199s-56.3 37-102.7 93.9c-39.8 48.9-54.6 84.8-62.6 107.8l-1.3 4.8c41 45.7 100.5 74.5 166.8 74.5 66.3 0 125.8-28.8 166.8-74.5l-1.4-4.8c-8-23-22.9-58.9-62.7-107.8z" fill="currentColor"/></svg>
</template>

CSS

.icon-xbox {
  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%20512%20512%22%3E%3Cpath%20d%3D%22M126.8%20248.3c39.7-58.6%2077.9-92.8%2077.9-92.8s-42.1-48.9-92.8-67.4l-3.3-.8C61.7%20128.4%2032%20188.7%2032%20256c0%2050.7%2016.9%2097.5%2045.2%20135%200-4.4.6-70.3%2049.6-142.7z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M480%20256c0-67.3-29.7-127.6-76.6-168.7l-3.2.9c-50.7%2018.5-92.9%2067.4-92.9%2067.4s38.2%2034.2%2077.9%2092.8c49%2072.4%2049.6%20138.3%2049.5%20142.7C463.2%20353.5%20480%20306.7%20480%20256z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M201.2%2080.9c29.3%2013.1%2054.6%2034.6%2054.6%2034.6s25.5-21.4%2054.8-34.6c36.8-16.5%2064.9-11.3%2072.3-9.5C346.8%2046.6%20303.1%2032%20256%2032c-47.1%200-90.8%2014.6-126.9%2039.4%207.2-1.8%2035.2-7.1%2072.1%209.5z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M358.7%20292.9C312.4%20236%20255.8%20199%20255.8%20199s-56.3%2037-102.7%2093.9c-39.8%2048.9-54.6%2084.8-62.6%20107.8l-1.3%204.8c41%2045.7%20100.5%2074.5%20166.8%2074.5%2066.3%200%20125.8-28.8%20166.8-74.5l-1.4-4.8c-8-23-22.9-58.9-62.7-107.8z%22%20fill%3D%22currentColor%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%20512%20512%22%3E%3Cpath%20d%3D%22M126.8%20248.3c39.7-58.6%2077.9-92.8%2077.9-92.8s-42.1-48.9-92.8-67.4l-3.3-.8C61.7%20128.4%2032%20188.7%2032%20256c0%2050.7%2016.9%2097.5%2045.2%20135%200-4.4.6-70.3%2049.6-142.7z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M480%20256c0-67.3-29.7-127.6-76.6-168.7l-3.2.9c-50.7%2018.5-92.9%2067.4-92.9%2067.4s38.2%2034.2%2077.9%2092.8c49%2072.4%2049.6%20138.3%2049.5%20142.7C463.2%20353.5%20480%20306.7%20480%20256z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M201.2%2080.9c29.3%2013.1%2054.6%2034.6%2054.6%2034.6s25.5-21.4%2054.8-34.6c36.8-16.5%2064.9-11.3%2072.3-9.5C346.8%2046.6%20303.1%2032%20256%2032c-47.1%200-90.8%2014.6-126.9%2039.4%207.2-1.8%2035.2-7.1%2072.1%209.5z%22%20fill%3D%22currentColor%22%2F%3E%3Cpath%20d%3D%22M358.7%20292.9C312.4%20236%20255.8%20199%20255.8%20199s-56.3%2037-102.7%2093.9c-39.8%2048.9-54.6%2084.8-62.6%20107.8l-1.3%204.8c41%2045.7%20100.5%2074.5%20166.8%2074.5%2066.3%200%20125.8-28.8%20166.8-74.5l-1.4-4.8c-8-23-22.9-58.9-62.7-107.8z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/xbox.svg?color=%231a73e8&size=48