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

Game Icons · GiLava

Lava icon

A free lava icon from Game 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: CC BY 3.0 license
Project: game-icons.net

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/game-icons/lava.json

components/icons/game-icons-lava.tsx

import * as React from "react";

/**
 * Lava from Game Icons (https://game-icons.net/), CC BY 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/game-icons/lava. Sized in em, colored by currentColor.
 */
export function GiLavaIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      viewBox="0 0 512 512"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M257.188 45.875A44.867 44.867 0 0 0 211.28 91 44.867 44.867 0 1 0 301 91a44.867 44.867 0 0 0-43.813-45.125zM91.905 90.625A44.867 44.867 0 0 0 46 135.72a44.867 44.867 0 1 0 89.72 0 44.867 44.867 0 0 0-43.814-45.095zm330.281 0a44.867 44.867 0 0 0-45.906 45.094 44.867 44.867 0 1 0 89.72 0 44.867 44.867 0 0 0-43.813-45.095zM256.845 210.97A29.866 29.866 0 0 0 226.28 241a29.866 29.866 0 1 0 59.72 0 29.866 29.866 0 0 0-29.156-30.03zm-135 30A29.866 29.866 0 0 0 91.28 271a29.866 29.866 0 1 0 59.72 0 29.866 29.866 0 0 0-29.156-30.03zm270 0A29.866 29.866 0 0 0 361.28 271a29.866 29.866 0 1 0 59.72 0 29.866 29.866 0 0 0-29.156-30.03zm-135.5 89.81A15 15 0 0 0 241 345.876a15 15 0 1 0 30 0 15 15 0 0 0-14.656-15.094zm-120 15A15 15 0 0 0 121 360.876a15 15 0 1 0 30 0 15 15 0 0 0-14.656-15.094zm240 0A15 15 0 0 0 361 360.876a15 15 0 1 0 30 0 15 15 0 0 0-14.656-15.094zM76 375.876c-15 0-30 30-30 30-30 0-30 0-30 30v30h480v-30c0-30 0-30-30-30 0 0-15-30-30-30-30 0-30 45-60 45s-30-45-60-45-30 45-60 45-30-45-60-45-30 45-60 45-30-45-60-45z"
      />
    </svg>
  );
}

With react-icons

import { GiLava } from "react-icons/gi";

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

lava.svg

<svg
  viewBox="0 0 512 512"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    d="M257.188 45.875A44.867 44.867 0 0 0 211.28 91 44.867 44.867 0 1 0 301 91a44.867 44.867 0 0 0-43.813-45.125zM91.905 90.625A44.867 44.867 0 0 0 46 135.72a44.867 44.867 0 1 0 89.72 0 44.867 44.867 0 0 0-43.814-45.095zm330.281 0a44.867 44.867 0 0 0-45.906 45.094 44.867 44.867 0 1 0 89.72 0 44.867 44.867 0 0 0-43.813-45.095zM256.845 210.97A29.866 29.866 0 0 0 226.28 241a29.866 29.866 0 1 0 59.72 0 29.866 29.866 0 0 0-29.156-30.03zm-135 30A29.866 29.866 0 0 0 91.28 271a29.866 29.866 0 1 0 59.72 0 29.866 29.866 0 0 0-29.156-30.03zm270 0A29.866 29.866 0 0 0 361.28 271a29.866 29.866 0 1 0 59.72 0 29.866 29.866 0 0 0-29.156-30.03zm-135.5 89.81A15 15 0 0 0 241 345.876a15 15 0 1 0 30 0 15 15 0 0 0-14.656-15.094zm-120 15A15 15 0 0 0 121 360.876a15 15 0 1 0 30 0 15 15 0 0 0-14.656-15.094zm240 0A15 15 0 0 0 361 360.876a15 15 0 1 0 30 0 15 15 0 0 0-14.656-15.094zM76 375.876c-15 0-30 30-30 30-30 0-30 0-30 30v30h480v-30c0-30 0-30-30-30 0 0-15-30-30-30-30 0-30 45-60 45s-30-45-60-45-30 45-60 45-30-45-60-45-30 45-60 45-30-45-60-45z"
  />
</svg>

Attribution

"Lava" icon from Game Icons (https://game-icons.net/), licensed under CC BY 3.0 license.

Similar Game Icons icons