steam symbol logo

steam-symbol from Font Awesome 6 Brands by Dave Gandy · Regular · Games · CC-BY-4.0 Attribution required.

Name
steam-symbol
Set
Font Awesome 6 Brands
Style
Regular
Category
Games
Viewbox
448×512
License
CC BY 4.0

The same logo in other sets

steam-symbolFont Awesome Brandssteam-symbolLine Awesome

More games icons from Font Awesome 6 Brands

playstationsteamtwitchxbox

Use the steam symbol logo

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M395.5 177.5c0 33.8-27.5 61-61 61c-33.8 0-61-27.3-61-61s27.3-61 61-61c33.5 0 61 27.2 61 61m52.5.2c0 63-51 113.8-113.7 113.8L225 371.3c-4 43-40.5 76.8-84.5 76.8c-40.5 0-74.7-28.8-83-67L0 358V250.7L97.2 290c15.1-9.2 32.2-13.3 52-11.5l71-101.7c.5-62.3 51.5-112.8 114-112.8C397 64 448 115 448 177.7M203 363c0-34.7-27.8-62.5-62.5-62.5q-6.75 0-13.5 1.5l26 10.5c25.5 10.2 38 39 27.7 64.5c-10.2 25.5-39.2 38-64.7 27.5c-10.2-4-20.5-8.3-30.7-12.2c10.5 19.7 31.2 33.2 55.2 33.2c34.7 0 62.5-27.8 62.5-62.5m207.5-185.3c0-42-34.3-76.2-76.2-76.2c-42.3 0-76.5 34.2-76.5 76.2c0 42.2 34.3 76.2 76.5 76.2c41.9.1 76.2-33.9 76.2-76.2"/></svg>

React

import type { SVGProps } from "react";

export function Fa6BrandsSteamSymbol(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M395.5 177.5c0 33.8-27.5 61-61 61c-33.8 0-61-27.3-61-61s27.3-61 61-61c33.5 0 61 27.2 61 61m52.5.2c0 63-51 113.8-113.7 113.8L225 371.3c-4 43-40.5 76.8-84.5 76.8c-40.5 0-74.7-28.8-83-67L0 358V250.7L97.2 290c15.1-9.2 32.2-13.3 52-11.5l71-101.7c.5-62.3 51.5-112.8 114-112.8C397 64 448 115 448 177.7M203 363c0-34.7-27.8-62.5-62.5-62.5q-6.75 0-13.5 1.5l26 10.5c25.5 10.2 38 39 27.7 64.5c-10.2 25.5-39.2 38-64.7 27.5c-10.2-4-20.5-8.3-30.7-12.2c10.5 19.7 31.2 33.2 55.2 33.2c34.7 0 62.5-27.8 62.5-62.5m207.5-185.3c0-42-34.3-76.2-76.2-76.2c-42.3 0-76.5 34.2-76.5 76.2c0 42.2 34.3 76.2 76.5 76.2c41.9.1 76.2-33.9 76.2-76.2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M395.5 177.5c0 33.8-27.5 61-61 61c-33.8 0-61-27.3-61-61s27.3-61 61-61c33.5 0 61 27.2 61 61m52.5.2c0 63-51 113.8-113.7 113.8L225 371.3c-4 43-40.5 76.8-84.5 76.8c-40.5 0-74.7-28.8-83-67L0 358V250.7L97.2 290c15.1-9.2 32.2-13.3 52-11.5l71-101.7c.5-62.3 51.5-112.8 114-112.8C397 64 448 115 448 177.7M203 363c0-34.7-27.8-62.5-62.5-62.5q-6.75 0-13.5 1.5l26 10.5c25.5 10.2 38 39 27.7 64.5c-10.2 25.5-39.2 38-64.7 27.5c-10.2-4-20.5-8.3-30.7-12.2c10.5 19.7 31.2 33.2 55.2 33.2c34.7 0 62.5-27.8 62.5-62.5m207.5-185.3c0-42-34.3-76.2-76.2-76.2c-42.3 0-76.5 34.2-76.5 76.2c0 42.2 34.3 76.2 76.5 76.2c41.9.1 76.2-33.9 76.2-76.2"/></svg>
</template>

CSS

.icon-steam-symbol {
  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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M395.5%20177.5c0%2033.8-27.5%2061-61%2061c-33.8%200-61-27.3-61-61s27.3-61%2061-61c33.5%200%2061%2027.2%2061%2061m52.5.2c0%2063-51%20113.8-113.7%20113.8L225%20371.3c-4%2043-40.5%2076.8-84.5%2076.8c-40.5%200-74.7-28.8-83-67L0%20358V250.7L97.2%20290c15.1-9.2%2032.2-13.3%2052-11.5l71-101.7c.5-62.3%2051.5-112.8%20114-112.8C397%2064%20448%20115%20448%20177.7M203%20363c0-34.7-27.8-62.5-62.5-62.5q-6.75%200-13.5%201.5l26%2010.5c25.5%2010.2%2038%2039%2027.7%2064.5c-10.2%2025.5-39.2%2038-64.7%2027.5c-10.2-4-20.5-8.3-30.7-12.2c10.5%2019.7%2031.2%2033.2%2055.2%2033.2c34.7%200%2062.5-27.8%2062.5-62.5m207.5-185.3c0-42-34.3-76.2-76.2-76.2c-42.3%200-76.5%2034.2-76.5%2076.2c0%2042.2%2034.3%2076.2%2076.5%2076.2c41.9.1%2076.2-33.9%2076.2-76.2%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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M395.5%20177.5c0%2033.8-27.5%2061-61%2061c-33.8%200-61-27.3-61-61s27.3-61%2061-61c33.5%200%2061%2027.2%2061%2061m52.5.2c0%2063-51%20113.8-113.7%20113.8L225%20371.3c-4%2043-40.5%2076.8-84.5%2076.8c-40.5%200-74.7-28.8-83-67L0%20358V250.7L97.2%20290c15.1-9.2%2032.2-13.3%2052-11.5l71-101.7c.5-62.3%2051.5-112.8%20114-112.8C397%2064%20448%20115%20448%20177.7M203%20363c0-34.7-27.8-62.5-62.5-62.5q-6.75%200-13.5%201.5l26%2010.5c25.5%2010.2%2038%2039%2027.7%2064.5c-10.2%2025.5-39.2%2038-64.7%2027.5c-10.2-4-20.5-8.3-30.7-12.2c10.5%2019.7%2031.2%2033.2%2055.2%2033.2c34.7%200%2062.5-27.8%2062.5-62.5m207.5-185.3c0-42-34.3-76.2-76.2-76.2c-42.3%200-76.5%2034.2-76.5%2076.2c0%2042.2%2034.3%2076.2%2076.5%2076.2c41.9.1%2076.2-33.9%2076.2-76.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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