Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x 161x | /**
* CheckCircleIcon - Check mark in circle icon
* Commonly used for success states, in-stock indicators, and confirmations
*
* @example
* ```tsx
* <CheckCircleIcon /> // Default 20x20
* <CheckCircleIcon width={24} height={24} />
* <CheckCircleIcon className="text-green-500" />
* ```
*/
export default function CheckCircleIcon({
width = 20,
height = 20,
className = '',
...props
}: React.SVGProps<SVGSVGElement>) {
return (
<svg
{...props}
className={className}
width={width}
height={height}
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_checkcircle_icon)">
<path
d="M10 0.5625C4.78125 0.5625 0.5625 4.78125 0.5625 10C0.5625 15.2188 4.78125 19.4688 10 19.4688C15.2188 19.4688 19.4688 15.2188 19.4688 10C19.4688 4.78125 15.2188 0.5625 10 0.5625ZM10 18.0625C5.5625 18.0625 1.96875 14.4375 1.96875 10C1.96875 5.5625 5.5625 1.96875 10 1.96875C14.4375 1.96875 18.0625 5.59375 18.0625 10.0312C18.0625 14.4375 14.4375 18.0625 10 18.0625Z"
fill="currentColor"
/>
<path
d="M12.6875 7.09374L8.9688 10.7187L7.2813 9.06249C7.00005 8.78124 6.56255 8.81249 6.2813 9.06249C6.00005 9.34374 6.0313 9.78124 6.2813 10.0625L8.2813 12C8.4688 12.1875 8.7188 12.2812 8.9688 12.2812C9.2188 12.2812 9.4688 12.1875 9.6563 12L13.6875 8.12499C13.9688 7.84374 13.9688 7.40624 13.6875 7.12499C13.4063 6.84374 12.9688 6.84374 12.6875 7.09374Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_checkcircle_icon">
<rect width="20" height="20" fill="white" />
</clipPath>
</defs>
</svg>
);
}
|