Hover the icon or press Play. Suggested motion: nod. Pick another to preview it and update the animated code:
Avatar icon
A free avatar icon from Radix 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
- MIT license
- Project
- icons.radix-ui.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/avatar.jsonimport * as React from "react";
/**
* Avatar from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/avatar. Sized in em, colored by currentColor.
*/
export function RxAvatarIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M7.49908 0.87706C11.1565 0.87706 14.1217 3.84179 14.1221 7.49913C14.1221 11.1568 11.1567 14.1222 7.49908 14.1222C3.84175 14.1218 0.877014 11.1565 0.877014 7.49913C0.877426 3.84205 3.842 0.877471 7.49908 0.87706ZM7.50006 9.97472C6.01506 9.9748 4.7185 10.78 4.02057 11.9786C4.98131 12.7259 6.18779 13.1718 7.49908 13.172C8.81087 13.172 10.0176 12.7253 10.9786 11.9776C10.2804 10.7797 8.98458 9.97474 7.50006 9.97472ZM7.49908 1.82628C4.36667 1.82669 1.82664 4.36672 1.82623 7.49913C1.82623 8.97122 2.38807 10.3122 3.30768 11.3204C4.19121 9.94086 5.73848 9.02558 7.50006 9.0255C9.26117 9.02552 10.8078 9.94052 11.6915 11.3194C12.6107 10.3113 13.1719 8.97095 13.1719 7.49913C13.1715 4.36647 10.6318 1.82628 7.49908 1.82628ZM7.50006 4.15538C8.7979 4.15542 9.84967 5.20714 9.84967 6.50499C9.84961 7.80279 8.79786 8.85456 7.50006 8.8546C6.20223 8.8546 5.15051 7.80281 5.15045 6.50499C5.15045 5.20712 6.20219 4.15538 7.50006 4.15538ZM7.50006 5.1046C6.72686 5.1046 6.09967 5.73179 6.09967 6.50499C6.09973 7.27814 6.7269 7.90538 7.50006 7.90538C8.27319 7.90534 8.9004 7.27812 8.90045 6.50499C8.90045 5.73181 8.27323 5.10464 7.50006 5.1046Z"
fill="currentColor"
/>
</svg>
);
}import { RxAvatar } from "react-icons/rx";
export function Example() {
return <RxAvatar className="size-5" />;
}<svg
fill="none"
viewBox="0 0 15 15"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.49908 0.87706C11.1565 0.87706 14.1217 3.84179 14.1221 7.49913C14.1221 11.1568 11.1567 14.1222 7.49908 14.1222C3.84175 14.1218 0.877014 11.1565 0.877014 7.49913C0.877426 3.84205 3.842 0.877471 7.49908 0.87706ZM7.50006 9.97472C6.01506 9.9748 4.7185 10.78 4.02057 11.9786C4.98131 12.7259 6.18779 13.1718 7.49908 13.172C8.81087 13.172 10.0176 12.7253 10.9786 11.9776C10.2804 10.7797 8.98458 9.97474 7.50006 9.97472ZM7.49908 1.82628C4.36667 1.82669 1.82664 4.36672 1.82623 7.49913C1.82623 8.97122 2.38807 10.3122 3.30768 11.3204C4.19121 9.94086 5.73848 9.02558 7.50006 9.0255C9.26117 9.02552 10.8078 9.94052 11.6915 11.3194C12.6107 10.3113 13.1719 8.97095 13.1719 7.49913C13.1715 4.36647 10.6318 1.82628 7.49908 1.82628ZM7.50006 4.15538C8.7979 4.15542 9.84967 5.20714 9.84967 6.50499C9.84961 7.80279 8.79786 8.85456 7.50006 8.8546C6.20223 8.8546 5.15051 7.80281 5.15045 6.50499C5.15045 5.20712 6.20219 4.15538 7.50006 4.15538ZM7.50006 5.1046C6.72686 5.1046 6.09967 5.73179 6.09967 6.50499C6.09973 7.27814 6.7269 7.90538 7.50006 7.90538C8.27319 7.90534 8.9004 7.27812 8.90045 6.50499C8.90045 5.73181 8.27323 5.10464 7.50006 5.1046Z"
fill="currentColor"
/>
</svg>"Avatar" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.