steam logo

steam from Simple Icons by Simple Icons Collaborators · Brand · CC0-1.0 Free for personal and commercial use.

Name: steam
Set: Simple Icons
Style: Brand
Viewbox: 24×24
License: CC0 1.0

The same logo in other sets

steamBootstrap Icons steamBoxicons Brands steamCoreUI Brands steamFont Awesome 6 Brands steamFont Awesome Brands steamIonIcons steamLine Awesome steamSVG Logos steamMage Icons steamMaterial Design Icons steam-fillMingCute Icon steam-fillRemix Icon steamTabler Icons

Use the steam logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.4 3.4 0 0 1 1.912-.59q.094.001.188.006l2.861-4.142V8.91a4.53 4.53 0 0 1 4.524-4.524c2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911l.004.159a3.39 3.39 0 0 1-3.39 3.396a3.41 3.41 0 0 1-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0M7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25a2.551 2.551 0 0 0 3.337-3.324a2.547 2.547 0 0 0-3.255-1.413l1.523.63a1.878 1.878 0 0 1-1.445 3.467zm11.415-9.303a3.02 3.02 0 0 0-3.015-3.015a3.015 3.015 0 1 0 3.015 3.015m-5.273-.005a2.264 2.264 0 1 1 4.531 0a2.267 2.267 0 0 1-2.266 2.265a2.264 2.264 0 0 1-2.265-2.265"/></svg>

React

import type { SVGProps } from "react";

export function SimpleIconsSteam(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="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.4 3.4 0 0 1 1.912-.59q.094.001.188.006l2.861-4.142V8.91a4.53 4.53 0 0 1 4.524-4.524c2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911l.004.159a3.39 3.39 0 0 1-3.39 3.396a3.41 3.41 0 0 1-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0M7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25a2.551 2.551 0 0 0 3.337-3.324a2.547 2.547 0 0 0-3.255-1.413l1.523.63a1.878 1.878 0 0 1-1.445 3.467zm11.415-9.303a3.02 3.02 0 0 0-3.015-3.015a3.015 3.015 0 1 0 3.015 3.015m-5.273-.005a2.264 2.264 0 1 1 4.531 0a2.267 2.267 0 0 1-2.266 2.265a2.264 2.264 0 0 1-2.265-2.265"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.979 0C5.678 0 .511 4.86.022 11.037l6.432 2.658a3.4 3.4 0 0 1 1.912-.59q.094.001.188.006l2.861-4.142V8.91a4.53 4.53 0 0 1 4.524-4.524c2.494 0 4.524 2.031 4.524 4.527s-2.03 4.525-4.524 4.525h-.105l-4.076 2.911l.004.159a3.39 3.39 0 0 1-3.39 3.396a3.41 3.41 0 0 1-3.331-2.727L.436 15.27C1.862 20.307 6.486 24 11.979 24c6.627 0 11.999-5.373 11.999-12S18.605 0 11.979 0M7.54 18.21l-1.473-.61c.262.543.714.999 1.314 1.25a2.551 2.551 0 0 0 3.337-3.324a2.547 2.547 0 0 0-3.255-1.413l1.523.63a1.878 1.878 0 0 1-1.445 3.467zm11.415-9.303a3.02 3.02 0 0 0-3.015-3.015a3.015 3.015 0 1 0 3.015 3.015m-5.273-.005a2.264 2.264 0 1 1 4.531 0a2.267 2.267 0 0 1-2.266 2.265a2.264 2.264 0 0 1-2.265-2.265"/></svg>
</template>

CSS

.icon-steam {
  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%22M11.979%200C5.678%200%20.511%204.86.022%2011.037l6.432%202.658a3.4%203.4%200%200%201%201.912-.59q.094.001.188.006l2.861-4.142V8.91a4.53%204.53%200%200%201%204.524-4.524c2.494%200%204.524%202.031%204.524%204.527s-2.03%204.525-4.524%204.525h-.105l-4.076%202.911l.004.159a3.39%203.39%200%200%201-3.39%203.396a3.41%203.41%200%200%201-3.331-2.727L.436%2015.27C1.862%2020.307%206.486%2024%2011.979%2024c6.627%200%2011.999-5.373%2011.999-12S18.605%200%2011.979%200M7.54%2018.21l-1.473-.61c.262.543.714.999%201.314%201.25a2.551%202.551%200%200%200%203.337-3.324a2.547%202.547%200%200%200-3.255-1.413l1.523.63a1.878%201.878%200%200%201-1.445%203.467zm11.415-9.303a3.02%203.02%200%200%200-3.015-3.015a3.015%203.015%200%201%200%203.015%203.015m-5.273-.005a2.264%202.264%200%201%201%204.531%200a2.267%202.267%200%200%201-2.266%202.265a2.264%202.264%200%200%201-2.265-2.265%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%22M11.979%200C5.678%200%20.511%204.86.022%2011.037l6.432%202.658a3.4%203.4%200%200%201%201.912-.59q.094.001.188.006l2.861-4.142V8.91a4.53%204.53%200%200%201%204.524-4.524c2.494%200%204.524%202.031%204.524%204.527s-2.03%204.525-4.524%204.525h-.105l-4.076%202.911l.004.159a3.39%203.39%200%200%201-3.39%203.396a3.41%203.41%200%200%201-3.331-2.727L.436%2015.27C1.862%2020.307%206.486%2024%2011.979%2024c6.627%200%2011.999-5.373%2011.999-12S18.605%200%2011.979%200M7.54%2018.21l-1.473-.61c.262.543.714.999%201.314%201.25a2.551%202.551%200%200%200%203.337-3.324a2.547%202.547%200%200%200-3.255-1.413l1.523.63a1.878%201.878%200%200%201-1.445%203.467zm11.415-9.303a3.02%203.02%200%200%200-3.015-3.015a3.015%203.015%200%201%200%203.015%203.015m-5.273-.005a2.264%202.264%200%201%201%204.531%200a2.267%202.267%200%200%201-2.266%202.265a2.264%202.264%200%200%201-2.265-2.265%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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