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

Game Icons · GiCannister

Cannister icon

A free cannister 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/cannister.json

components/icons/game-icons-cannister.tsx

import * as React from "react";

/**
 * Cannister from Game Icons (https://game-icons.net/), CC BY 3.0.
 * Via Cuelark UI: ui.cuelark.com/icons/game-icons/cannister. Sized in em, colored by currentColor.
 */
export function GiCannisterIcon(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="M336.438 20.375c-.93-.01-1.855.01-2.782.03-23.67.532-46.656 11.083-62.437 29.907l143.06 82.594c13.666-37.527-1.125-80.59-36.905-101.25-12.925-7.463-27.007-11.128-40.938-11.28zm-88.72 37.97l-9.812 17 44.22 25.53c10.07 5.815 16.038 16.205 19.374 27 3.336 10.795 4.395 22.475-1.375 32.47l-47.063 81.53c-5.4 9.354-14.777 15.994-25.53 19.313-10.754 3.318-23.383 3.12-34.47-3.282l-45.437-26.22L79.187 350.22l168.875 97.53 23.094-40-45.906-26.594-8.063-4.687 4.657-8.064L336.72 168.75l4.655-8.125 8.125 4.72 46.125 26.718 20.938-36.25-168.844-97.47zm-74.343 1.03l-9.344 16.188 17.095 9.874-52.906 91.72-17.126-9.876-9.344 16.19 17.125 9.874-.063.125 83.594 48.25c5.86 3.38 12.94 3.655 19.625 1.593 6.686-2.063 12.448-6.63 14.845-10.782L283.938 151c1.39-2.408 2.03-10.11-.282-17.594-2.313-7.484-7.217-14.232-10.875-16.344l-16.467-9.5.125-.218-83.063-47.97zm45.375 54.094c4.968.015 10.01 1.284 14.656 3.968 14.163 8.176 18.958 26.024 10.78 40.187-8.176 14.163-26.02 18.928-40.186 10.75-14.163-8.177-18.958-25.993-10.78-40.156 5.11-8.853 14.003-14.04 23.405-14.69.705-.047 1.415-.064 2.125-.06zm-52.156 51.624c2.72.05 5.505.8 8.125 2.312 7.982 4.61 10.583 14.204 6.28 21.656-4.303 7.454-13.92 10.017-21.906 5.407-7.984-4.61-10.553-14.205-6.25-21.657 2.69-4.658 7.452-7.41 12.594-7.688.385-.02.767-.038 1.156-.03zm181.656 21.094L242.687 369.625l41.125 23.844 105.563-183.44-41.125-23.843zm-137.313 4.5c2.727.05 5.537.8 8.157 2.312 7.983 4.61 10.553 14.204 6.25 21.656-4.303 7.453-13.89 10.017-21.875 5.406-7.976-4.604-10.565-14.175-6.282-21.625v-.03c2.69-4.66 7.45-7.41 12.593-7.688.387-.022.768-.04 1.157-.032zM83.313 374.217c-17.224 38.714-2.76 84.968 34.75 106.626 37.522 21.664 84.817 11.05 109.72-23.25L83.31 374.22z"
      />
    </svg>
  );
}

With react-icons

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

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

cannister.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="M336.438 20.375c-.93-.01-1.855.01-2.782.03-23.67.532-46.656 11.083-62.437 29.907l143.06 82.594c13.666-37.527-1.125-80.59-36.905-101.25-12.925-7.463-27.007-11.128-40.938-11.28zm-88.72 37.97l-9.812 17 44.22 25.53c10.07 5.815 16.038 16.205 19.374 27 3.336 10.795 4.395 22.475-1.375 32.47l-47.063 81.53c-5.4 9.354-14.777 15.994-25.53 19.313-10.754 3.318-23.383 3.12-34.47-3.282l-45.437-26.22L79.187 350.22l168.875 97.53 23.094-40-45.906-26.594-8.063-4.687 4.657-8.064L336.72 168.75l4.655-8.125 8.125 4.72 46.125 26.718 20.938-36.25-168.844-97.47zm-74.343 1.03l-9.344 16.188 17.095 9.874-52.906 91.72-17.126-9.876-9.344 16.19 17.125 9.874-.063.125 83.594 48.25c5.86 3.38 12.94 3.655 19.625 1.593 6.686-2.063 12.448-6.63 14.845-10.782L283.938 151c1.39-2.408 2.03-10.11-.282-17.594-2.313-7.484-7.217-14.232-10.875-16.344l-16.467-9.5.125-.218-83.063-47.97zm45.375 54.094c4.968.015 10.01 1.284 14.656 3.968 14.163 8.176 18.958 26.024 10.78 40.187-8.176 14.163-26.02 18.928-40.186 10.75-14.163-8.177-18.958-25.993-10.78-40.156 5.11-8.853 14.003-14.04 23.405-14.69.705-.047 1.415-.064 2.125-.06zm-52.156 51.624c2.72.05 5.505.8 8.125 2.312 7.982 4.61 10.583 14.204 6.28 21.656-4.303 7.454-13.92 10.017-21.906 5.407-7.984-4.61-10.553-14.205-6.25-21.657 2.69-4.658 7.452-7.41 12.594-7.688.385-.02.767-.038 1.156-.03zm181.656 21.094L242.687 369.625l41.125 23.844 105.563-183.44-41.125-23.843zm-137.313 4.5c2.727.05 5.537.8 8.157 2.312 7.983 4.61 10.553 14.204 6.25 21.656-4.303 7.453-13.89 10.017-21.875 5.406-7.976-4.604-10.565-14.175-6.282-21.625v-.03c2.69-4.66 7.45-7.41 12.593-7.688.387-.022.768-.04 1.157-.032zM83.313 374.217c-17.224 38.714-2.76 84.968 34.75 106.626 37.522 21.664 84.817 11.05 109.72-23.25L83.31 374.22z"
  />
</svg>

Attribution

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

Similar Game Icons icons