steam icon
steam-fill from Remix Icon by Remix Design · Fill · Logos · Apache-2.0 Free for personal and commercial use.
- Name
- steam-fill
- Set
- Remix Icon
- Style
- Fill
- Category
- Logos
- Viewbox
- 24×24
- License
- Apache 2.0
1 other variant in Remix Icon
The same icon in other sets
More logos icons from Remix Icon
Use the steam icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12.005 2c-5.25 0-9.556 4.05-9.964 9.198l5.36 2.214a2.8 2.8 0 0 1 1.593-.491q.08.001.157.005l2.384-3.452v-.049c0-2.08 1.69-3.77 3.77-3.77a3.776 3.776 0 0 1 3.77 3.773c0 2.08-1.691 3.77-3.77 3.77h-.087l-3.397 2.426l.003.133A2.826 2.826 0 0 1 9 18.587a2.844 2.844 0 0 1-2.775-2.273l-3.838-1.589C3.574 18.923 7.428 22 12.006 22c5.522 0 9.998-4.477 9.998-10S17.527 2 12.005 2M7.08 16.667c.218.452.595.832 1.095 1.041a2.126 2.126 0 0 0 2.78-2.77a2.123 2.123 0 0 0-2.712-1.178l1.269.526a1.565 1.565 0 0 1-1.204 2.889zm10.74-7.245a2.516 2.516 0 0 0-2.513-2.512a2.513 2.513 0 1 0 2.513 2.512M15.312 7.53A1.89 1.89 0 0 1 17.2 9.418a1.89 1.89 0 0 1-1.888 1.888a1.887 1.887 0 1 1 0-3.776"/></svg>
React
import type { SVGProps } from "react";
export function RiSteamFill(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="M12.005 2c-5.25 0-9.556 4.05-9.964 9.198l5.36 2.214a2.8 2.8 0 0 1 1.593-.491q.08.001.157.005l2.384-3.452v-.049c0-2.08 1.69-3.77 3.77-3.77a3.776 3.776 0 0 1 3.77 3.773c0 2.08-1.691 3.77-3.77 3.77h-.087l-3.397 2.426l.003.133A2.826 2.826 0 0 1 9 18.587a2.844 2.844 0 0 1-2.775-2.273l-3.838-1.589C3.574 18.923 7.428 22 12.006 22c5.522 0 9.998-4.477 9.998-10S17.527 2 12.005 2M7.08 16.667c.218.452.595.832 1.095 1.041a2.126 2.126 0 0 0 2.78-2.77a2.123 2.123 0 0 0-2.712-1.178l1.269.526a1.565 1.565 0 0 1-1.204 2.889zm10.74-7.245a2.516 2.516 0 0 0-2.513-2.512a2.513 2.513 0 1 0 2.513 2.512M15.312 7.53A1.89 1.89 0 0 1 17.2 9.418a1.89 1.89 0 0 1-1.888 1.888a1.887 1.887 0 1 1 0-3.776"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12.005 2c-5.25 0-9.556 4.05-9.964 9.198l5.36 2.214a2.8 2.8 0 0 1 1.593-.491q.08.001.157.005l2.384-3.452v-.049c0-2.08 1.69-3.77 3.77-3.77a3.776 3.776 0 0 1 3.77 3.773c0 2.08-1.691 3.77-3.77 3.77h-.087l-3.397 2.426l.003.133A2.826 2.826 0 0 1 9 18.587a2.844 2.844 0 0 1-2.775-2.273l-3.838-1.589C3.574 18.923 7.428 22 12.006 22c5.522 0 9.998-4.477 9.998-10S17.527 2 12.005 2M7.08 16.667c.218.452.595.832 1.095 1.041a2.126 2.126 0 0 0 2.78-2.77a2.123 2.123 0 0 0-2.712-1.178l1.269.526a1.565 1.565 0 0 1-1.204 2.889zm10.74-7.245a2.516 2.516 0 0 0-2.513-2.512a2.513 2.513 0 1 0 2.513 2.512M15.312 7.53A1.89 1.89 0 0 1 17.2 9.418a1.89 1.89 0 0 1-1.888 1.888a1.887 1.887 0 1 1 0-3.776"/></svg> </template>
CSS
.icon-steam-fill {
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%22M12.005%202c-5.25%200-9.556%204.05-9.964%209.198l5.36%202.214a2.8%202.8%200%200%201%201.593-.491q.08.001.157.005l2.384-3.452v-.049c0-2.08%201.69-3.77%203.77-3.77a3.776%203.776%200%200%201%203.77%203.773c0%202.08-1.691%203.77-3.77%203.77h-.087l-3.397%202.426l.003.133A2.826%202.826%200%200%201%209%2018.587a2.844%202.844%200%200%201-2.775-2.273l-3.838-1.589C3.574%2018.923%207.428%2022%2012.006%2022c5.522%200%209.998-4.477%209.998-10S17.527%202%2012.005%202M7.08%2016.667c.218.452.595.832%201.095%201.041a2.126%202.126%200%200%200%202.78-2.77a2.123%202.123%200%200%200-2.712-1.178l1.269.526a1.565%201.565%200%200%201-1.204%202.889zm10.74-7.245a2.516%202.516%200%200%200-2.513-2.512a2.513%202.513%200%201%200%202.513%202.512M15.312%207.53A1.89%201.89%200%200%201%2017.2%209.418a1.89%201.89%200%200%201-1.888%201.888a1.887%201.887%200%201%201%200-3.776%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%22M12.005%202c-5.25%200-9.556%204.05-9.964%209.198l5.36%202.214a2.8%202.8%200%200%201%201.593-.491q.08.001.157.005l2.384-3.452v-.049c0-2.08%201.69-3.77%203.77-3.77a3.776%203.776%200%200%201%203.77%203.773c0%202.08-1.691%203.77-3.77%203.77h-.087l-3.397%202.426l.003.133A2.826%202.826%200%200%201%209%2018.587a2.844%202.844%200%200%201-2.775-2.273l-3.838-1.589C3.574%2018.923%207.428%2022%2012.006%2022c5.522%200%209.998-4.477%209.998-10S17.527%202%2012.005%202M7.08%2016.667c.218.452.595.832%201.095%201.041a2.126%202.126%200%200%200%202.78-2.77a2.123%202.123%200%200%200-2.712-1.178l1.269.526a1.565%201.565%200%200%201-1.204%202.889zm10.74-7.245a2.516%202.516%200%200%200-2.513-2.512a2.513%202.513%200%201%200%202.513%202.512M15.312%207.53A1.89%201.89%200%200%201%2017.2%209.418a1.89%201.89%200%200%201-1.888%201.888a1.887%201.887%200%201%201%200-3.776%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ri/steam-fill.svg?color=%231a73e8&size=48
