Hover the icon or press Play. Suggested motion: twinkle. Pick another to preview it and update the animated code:
Medal icon
A free medal icon from Circum 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
- MPL-2.0 license
- Project
- circumicons.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/circum/medal.jsonimport * as React from "react";
/**
* Medal from Circum Icons (https://circumicons.com/), MPL-2.0 license.
* Via Cuelark UI: ui.cuelark.com/icons/circum/medal. Sized in em, colored by currentColor.
*/
export function CiMedalIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<g id="Medal">
<g>
<path
d="M20.692,3.755a1.519,1.519,0,0,0-1.27-.69h-4.41a1.487,1.487,0,0,0-1.36.87L12,7.485l-1.66-3.55a1.487,1.487,0,0,0-1.36-.87H4.572a1.5,1.5,0,0,0-1.35,2.14l3.73,8.02a5.638,5.638,0,0,0-.46,2.21,5.5,5.5,0,0,0,11,0,5.419,5.419,0,0,0-.46-2.2l3.75-8.03A1.525,1.525,0,0,0,20.692,3.755ZM4.122,4.785a.527.527,0,0,1,.03-.49.494.494,0,0,1,.42-.23h4.41a.507.507,0,0,1,.46.29l2.61,5.58h-.06a5.505,5.505,0,0,0-4.43,2.25Zm7.87,15.15a4.5,4.5,0,1,1,4.5-4.5A4.5,4.5,0,0,1,11.992,19.935Zm7.89-15.15-3.46,7.4a5.454,5.454,0,0,0-3.21-2.11l-.66-1.42,2-4.3a.507.507,0,0,1,.46-.29h4.41a.482.482,0,0,1,.42.23A.505.505,0,0,1,19.882,4.785Z"
/>
<path
d="M12.077,16.88l1.024.538a.174.174,0,0,0,.253-.184l-.2-1.14a.174.174,0,0,1,.051-.154l.828-.807a.175.175,0,0,0-.1-.3L12.8,14.669a.177.177,0,0,1-.132-.1l-.512-1.037a.174.174,0,0,0-.313,0l-.512,1.037a.174.174,0,0,1-.131.1l-1.145.166a.175.175,0,0,0-.1.3l.828.807a.174.174,0,0,1,.05.154l-.2,1.14a.174.174,0,0,0,.253.184l1.024-.538A.172.172,0,0,1,12.077,16.88Z"
/>
</g>
</g>
</svg>
);
}import { CiMedal } from "react-icons/ci";
export function Example() {
return <CiMedal className="size-5" />;
}<svg
viewBox="0 0 24 24"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Medal">
<g>
<path
d="M20.692,3.755a1.519,1.519,0,0,0-1.27-.69h-4.41a1.487,1.487,0,0,0-1.36.87L12,7.485l-1.66-3.55a1.487,1.487,0,0,0-1.36-.87H4.572a1.5,1.5,0,0,0-1.35,2.14l3.73,8.02a5.638,5.638,0,0,0-.46,2.21,5.5,5.5,0,0,0,11,0,5.419,5.419,0,0,0-.46-2.2l3.75-8.03A1.525,1.525,0,0,0,20.692,3.755ZM4.122,4.785a.527.527,0,0,1,.03-.49.494.494,0,0,1,.42-.23h4.41a.507.507,0,0,1,.46.29l2.61,5.58h-.06a5.505,5.505,0,0,0-4.43,2.25Zm7.87,15.15a4.5,4.5,0,1,1,4.5-4.5A4.5,4.5,0,0,1,11.992,19.935Zm7.89-15.15-3.46,7.4a5.454,5.454,0,0,0-3.21-2.11l-.66-1.42,2-4.3a.507.507,0,0,1,.46-.29h4.41a.482.482,0,0,1,.42.23A.505.505,0,0,1,19.882,4.785Z"
/>
<path
d="M12.077,16.88l1.024.538a.174.174,0,0,0,.253-.184l-.2-1.14a.174.174,0,0,1,.051-.154l.828-.807a.175.175,0,0,0-.1-.3L12.8,14.669a.177.177,0,0,1-.132-.1l-.512-1.037a.174.174,0,0,0-.313,0l-.512,1.037a.174.174,0,0,1-.131.1l-1.145.166a.175.175,0,0,0-.1.3l.828.807a.174.174,0,0,1,.05.154l-.2,1.14a.174.174,0,0,0,.253.184l1.024-.538A.172.172,0,0,1,12.077,16.88Z"
/>
</g>
</g>
</svg>"Medal" icon from Circum Icons (https://circumicons.com/), licensed under MPL-2.0 license.