Hover the icon or press Play. Suggested motion: nod. Pick another to preview it and update the animated code:

Flat Color Icons · FcSteam

Steam icon

A free steam icon from Flat Color Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/flat-color/steam.json

components/icons/flat-color-steam.tsx

import * as React from "react";

/**
 * Steam from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/flat-color/steam. Sized in em, colored by currentColor.
 */
export function FcSteamIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.1"
      x="0px"
      y="0px"
      viewBox="0 0 48 48"
      enableBackground="new 0 0 48 48"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        fill="#FFFFFF"
        d="M42,38c0,2.209-1.791,4-4,4H10c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4V38z"
      />
      <g>
        <path
          fill="#455A64"
          d="M18.459,33.645c-0.288,0-0.56-0.057-0.822-0.141l-0.005,0.02l-3.67-1.062
		c0.644,1.878,2.406,3.237,4.5,3.237c2.641,0,4.776-2.136,4.776-4.776s-2.135-4.777-4.776-4.777c-1.141,0-2.175,0.418-2.998,1.087
		L19,28.255c0.029,0.007,0.055,0.018,0.084,0.024l0.049,0.016v0.002c1.177,0.301,2.049,1.359,2.049,2.626
		C21.184,32.424,19.964,33.645,18.459,33.645z"
        />
        <path
          fill="#455A64"
          d="M30.923,24.299c3.222,0,5.837-2.615,5.837-5.838c0-3.222-2.615-5.837-5.837-5.837
		c-3.221,0-5.837,2.615-5.837,5.837C25.086,21.684,27.702,24.299,30.923,24.299z M30.92,14.409c2.24,0,4.056,1.813,4.056,4.052
		c0,2.241-1.815,4.053-4.056,4.053c-2.236,0-4.049-1.812-4.049-4.053C26.871,16.223,28.684,14.409,30.92,14.409z"
        />
        <path
          fill="#455A64"
          d="M38,6h-2.75h-22.5H10c-2.209,0-4,1.791-4,4v2.75v4.236v7.509l7.027,2.033
		c1.287-1.59,3.229-2.626,5.434-2.626c0.07,0,0.135,0.02,0.204,0.021l3.876-5.355c0-0.035-0.005-0.072-0.005-0.105
		c0-4.63,3.755-8.388,8.387-8.388c4.633,0,8.386,3.757,8.386,8.386c0,4.633-3.753,8.387-8.386,8.387
		c-0.044,0-0.087-0.006-0.132-0.007l-5.33,3.871c0.002,0.07,0.021,0.14,0.021,0.211c0,3.878-3.142,7.021-7.021,7.021
		c-3.593,0-6.52-2.707-6.937-6.188L6,30.158v2.583v2.509V38c0,2.209,1.791,4,4,4h2.75h22.5H38c2.209,0,4-1.791,4-4v-2.75v-22.5V10
		C42,7.791,40.209,6,38,6z"
        />
      </g>
    </svg>
  );
}

With react-icons

import { FcSteam } from "react-icons/fc";

export function Example() {
  return <FcSteam className="size-5" />;
}

steam.svg

<svg
  version="1.1"
  x="0px"
  y="0px"
  viewBox="0 0 48 48"
  enable-background="new 0 0 48 48"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill="#FFFFFF"
    d="M42,38c0,2.209-1.791,4-4,4H10c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h28c2.209,0,4,1.791,4,4V38z"
  />
  <g>
    <path
      fill="#455A64"
      d="M18.459,33.645c-0.288,0-0.56-0.057-0.822-0.141l-0.005,0.02l-3.67-1.062
		c0.644,1.878,2.406,3.237,4.5,3.237c2.641,0,4.776-2.136,4.776-4.776s-2.135-4.777-4.776-4.777c-1.141,0-2.175,0.418-2.998,1.087
		L19,28.255c0.029,0.007,0.055,0.018,0.084,0.024l0.049,0.016v0.002c1.177,0.301,2.049,1.359,2.049,2.626
		C21.184,32.424,19.964,33.645,18.459,33.645z"
    />
    <path
      fill="#455A64"
      d="M30.923,24.299c3.222,0,5.837-2.615,5.837-5.838c0-3.222-2.615-5.837-5.837-5.837
		c-3.221,0-5.837,2.615-5.837,5.837C25.086,21.684,27.702,24.299,30.923,24.299z M30.92,14.409c2.24,0,4.056,1.813,4.056,4.052
		c0,2.241-1.815,4.053-4.056,4.053c-2.236,0-4.049-1.812-4.049-4.053C26.871,16.223,28.684,14.409,30.92,14.409z"
    />
    <path
      fill="#455A64"
      d="M38,6h-2.75h-22.5H10c-2.209,0-4,1.791-4,4v2.75v4.236v7.509l7.027,2.033
		c1.287-1.59,3.229-2.626,5.434-2.626c0.07,0,0.135,0.02,0.204,0.021l3.876-5.355c0-0.035-0.005-0.072-0.005-0.105
		c0-4.63,3.755-8.388,8.387-8.388c4.633,0,8.386,3.757,8.386,8.386c0,4.633-3.753,8.387-8.386,8.387
		c-0.044,0-0.087-0.006-0.132-0.007l-5.33,3.871c0.002,0.07,0.021,0.14,0.021,0.211c0,3.878-3.142,7.021-7.021,7.021
		c-3.593,0-6.52-2.707-6.937-6.188L6,30.158v2.583v2.509V38c0,2.209,1.791,4,4,4h2.75h22.5H38c2.209,0,4-1.791,4-4v-2.75v-22.5V10
		C42,7.791,40.209,6,38,6z"
    />
  </g>
</svg>

Attribution

"Steam" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.

Steam icon in other sets

Similar Flat Color Icons icons