xbox logo
xbox from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.
- Name
- xbox
- Set
- Simple Icons
- Style
- Brand
- Viewbox
- 24×24
- License
- CC0 1.0
The same logo in other sets
Use the xbox logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.102 21.033A11.95 11.95 0 0 0 12 24a11.96 11.96 0 0 0 7.902-2.967c1.877-1.912-4.316-8.709-7.902-11.417c-3.582 2.708-9.779 9.505-7.898 11.417m11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912A11.94 11.94 0 0 0 24 12.004a11.95 11.95 0 0 0-3.57-8.536s-.027-.022-.082-.042a.8.8 0 0 0-.281-.045c-.592 0-1.985.434-4.805 3.246M3.654 3.426c-.057.02-.082.041-.086.042A11.96 11.96 0 0 0 0 12.004c0 2.854.998 5.473 2.661 7.533c-1.401-2.605 3.579-9.951 6.08-12.91c-2.82-2.813-4.216-3.245-4.806-3.245a.7.7 0 0 0-.281.046zM12 3.551S9.055 1.828 6.755 1.746c-.903-.033-1.454.295-1.521.339C7.379.646 9.659 0 11.984 0H12c2.334 0 4.605.646 6.766 2.085c-.068-.046-.615-.372-1.52-.339C14.946 1.828 12 3.545 12 3.545z"/></svg>
React
import type { SVGProps } from "react";
export function SimpleIconsXbox(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.102 21.033A11.95 11.95 0 0 0 12 24a11.96 11.96 0 0 0 7.902-2.967c1.877-1.912-4.316-8.709-7.902-11.417c-3.582 2.708-9.779 9.505-7.898 11.417m11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912A11.94 11.94 0 0 0 24 12.004a11.95 11.95 0 0 0-3.57-8.536s-.027-.022-.082-.042a.8.8 0 0 0-.281-.045c-.592 0-1.985.434-4.805 3.246M3.654 3.426c-.057.02-.082.041-.086.042A11.96 11.96 0 0 0 0 12.004c0 2.854.998 5.473 2.661 7.533c-1.401-2.605 3.579-9.951 6.08-12.91c-2.82-2.813-4.216-3.245-4.806-3.245a.7.7 0 0 0-.281.046zM12 3.551S9.055 1.828 6.755 1.746c-.903-.033-1.454.295-1.521.339C7.379.646 9.659 0 11.984 0H12c2.334 0 4.605.646 6.766 2.085c-.068-.046-.615-.372-1.52-.339C14.946 1.828 12 3.545 12 3.545z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M4.102 21.033A11.95 11.95 0 0 0 12 24a11.96 11.96 0 0 0 7.902-2.967c1.877-1.912-4.316-8.709-7.902-11.417c-3.582 2.708-9.779 9.505-7.898 11.417m11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912A11.94 11.94 0 0 0 24 12.004a11.95 11.95 0 0 0-3.57-8.536s-.027-.022-.082-.042a.8.8 0 0 0-.281-.045c-.592 0-1.985.434-4.805 3.246M3.654 3.426c-.057.02-.082.041-.086.042A11.96 11.96 0 0 0 0 12.004c0 2.854.998 5.473 2.661 7.533c-1.401-2.605 3.579-9.951 6.08-12.91c-2.82-2.813-4.216-3.245-4.806-3.245a.7.7 0 0 0-.281.046zM12 3.551S9.055 1.828 6.755 1.746c-.903-.033-1.454.295-1.521.339C7.379.646 9.659 0 11.984 0H12c2.334 0 4.605.646 6.766 2.085c-.068-.046-.615-.372-1.52-.339C14.946 1.828 12 3.545 12 3.545z"/></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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.102%2021.033A11.95%2011.95%200%200%200%2012%2024a11.96%2011.96%200%200%200%207.902-2.967c1.877-1.912-4.316-8.709-7.902-11.417c-3.582%202.708-9.779%209.505-7.898%2011.417m11.16-14.406c2.5%202.961%207.484%2010.313%206.076%2012.912A11.94%2011.94%200%200%200%2024%2012.004a11.95%2011.95%200%200%200-3.57-8.536s-.027-.022-.082-.042a.8.8%200%200%200-.281-.045c-.592%200-1.985.434-4.805%203.246M3.654%203.426c-.057.02-.082.041-.086.042A11.96%2011.96%200%200%200%200%2012.004c0%202.854.998%205.473%202.661%207.533c-1.401-2.605%203.579-9.951%206.08-12.91c-2.82-2.813-4.216-3.245-4.806-3.245a.7.7%200%200%200-.281.046zM12%203.551S9.055%201.828%206.755%201.746c-.903-.033-1.454.295-1.521.339C7.379.646%209.659%200%2011.984%200H12c2.334%200%204.605.646%206.766%202.085c-.068-.046-.615-.372-1.52-.339C14.946%201.828%2012%203.545%2012%203.545z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M4.102%2021.033A11.95%2011.95%200%200%200%2012%2024a11.96%2011.96%200%200%200%207.902-2.967c1.877-1.912-4.316-8.709-7.902-11.417c-3.582%202.708-9.779%209.505-7.898%2011.417m11.16-14.406c2.5%202.961%207.484%2010.313%206.076%2012.912A11.94%2011.94%200%200%200%2024%2012.004a11.95%2011.95%200%200%200-3.57-8.536s-.027-.022-.082-.042a.8.8%200%200%200-.281-.045c-.592%200-1.985.434-4.805%203.246M3.654%203.426c-.057.02-.082.041-.086.042A11.96%2011.96%200%200%200%200%2012.004c0%202.854.998%205.473%202.661%207.533c-1.401-2.605%203.579-9.951%206.08-12.91c-2.82-2.813-4.216-3.245-4.806-3.245a.7.7%200%200%200-.281.046zM12%203.551S9.055%201.828%206.755%201.746c-.903-.033-1.454.295-1.521.339C7.379.646%209.659%200%2011.984%200H12c2.334%200%204.605.646%206.766%202.085c-.068-.046-.615-.372-1.52-.339C14.946%201.828%2012%203.545%2012%203.545z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/simple-icons/xbox.svg?color=%231a73e8&size=48
