Hover the icon or press Play. Suggested motion: float. Pick another to preview it and update the animated code:
Dust Cloud icon
A free dust cloud 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
npx shadcn@latest add https://ui.cuelark.com/r/icons/game-icons/dust-cloud.jsonimport * as React from "react";
/**
* Dust Cloud from Game Icons (https://game-icons.net/), CC BY 3.0.
* Via Cuelark UI: ui.cuelark.com/icons/game-icons/dust-cloud. Sized in em, colored by currentColor.
*/
export function GiDustCloudIcon(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="M157.28 20.156c49.034 80.853 158.543 191.31 280.314 282.72-12.952-21.306-30.14-44.73-50.656-69.313 28.743-10.15 24.95-58.844-11.344-58.844-13.48 0-22.456 6.72-26.97 15.686C295.36 133.576 228.32 73.53 157.282 20.156zm149.5 19.657c-28.475 0-28.49 42.656 0 42.656 28.494 0 28.477-42.657 0-42.657zM96.814 53.718c-28.476 0-28.493 42.655 0 42.655 1.2 0 2.337-.074 3.437-.22 11.16 20.95 24.392 43.76 30.094 54.72-34.91-27.997-71.838-55.12-110.375-80.03 45.8 69.48 95.23 131.372 148.343 187.468-44.29-39.876-94.253-78.585-147.157-113.282 46.907 90.757 163.835 205.804 299 294.345-18.66-35.987-48.926-76.256-86.437-116.813 39.578 36.5 81.035 70.486 124.405 102.532-26.27 2.126-25.556 42.562 2.188 42.562 16.258 0 23.203-13.887 20.906-25.812 27.366 19.495 55.49 38.282 84.374 56.5-17.89-46.96-52.54-103.187-97.938-161.188 30.526 24.99 63.348 48.99 97.594 71.094-40.95-88.83-150.568-199.87-279.72-283.344 6.852 14.92 15.627 30.436 26.095 46.344-32.12-28.783-65.672-55.986-99.75-80.563 11.906-11.61 6.894-36.968-15.063-36.968zm-4.188 236.405c-28.476 0-28.493 42.656 0 42.656s28.476-42.655 0-42.655zm15.313 79.25c-28.476 0-28.493 42.656 0 42.656 28.492 0 28.475-42.655 0-42.655zm70.906 12.53c-48.87 0-48.9 73.22 0 73.22 48.898 0 48.87-73.22 0-73.22z"
/>
</svg>
);
}import { GiDustCloud } from "react-icons/gi";
export function Example() {
return <GiDustCloud className="size-5" />;
}<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="M157.28 20.156c49.034 80.853 158.543 191.31 280.314 282.72-12.952-21.306-30.14-44.73-50.656-69.313 28.743-10.15 24.95-58.844-11.344-58.844-13.48 0-22.456 6.72-26.97 15.686C295.36 133.576 228.32 73.53 157.282 20.156zm149.5 19.657c-28.475 0-28.49 42.656 0 42.656 28.494 0 28.477-42.657 0-42.657zM96.814 53.718c-28.476 0-28.493 42.655 0 42.655 1.2 0 2.337-.074 3.437-.22 11.16 20.95 24.392 43.76 30.094 54.72-34.91-27.997-71.838-55.12-110.375-80.03 45.8 69.48 95.23 131.372 148.343 187.468-44.29-39.876-94.253-78.585-147.157-113.282 46.907 90.757 163.835 205.804 299 294.345-18.66-35.987-48.926-76.256-86.437-116.813 39.578 36.5 81.035 70.486 124.405 102.532-26.27 2.126-25.556 42.562 2.188 42.562 16.258 0 23.203-13.887 20.906-25.812 27.366 19.495 55.49 38.282 84.374 56.5-17.89-46.96-52.54-103.187-97.938-161.188 30.526 24.99 63.348 48.99 97.594 71.094-40.95-88.83-150.568-199.87-279.72-283.344 6.852 14.92 15.627 30.436 26.095 46.344-32.12-28.783-65.672-55.986-99.75-80.563 11.906-11.61 6.894-36.968-15.063-36.968zm-4.188 236.405c-28.476 0-28.493 42.656 0 42.656s28.476-42.655 0-42.655zm15.313 79.25c-28.476 0-28.493 42.656 0 42.656 28.492 0 28.475-42.655 0-42.655zm70.906 12.53c-48.87 0-48.9 73.22 0 73.22 48.898 0 48.87-73.22 0-73.22z"
/>
</svg>"Dust Cloud" icon from Game Icons (https://game-icons.net/), licensed under CC BY 3.0 license.