Hover the icon or press Play. Suggested motion: nod. Pick another to preview it and update the animated code:
Person icon
A free person icon from VS Code 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 4.0 license
- Project
- github.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/person.jsonimport * as React from "react";
/**
* Person from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/person. Sized in em, colored by currentColor.
*/
export function VscPersonIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M9.342 4.53549C9.597 4.17049 9.75 3.72849 9.75 3.25049C9.75 2.00949 8.74 1.00049 7.5 1.00049C6.26 1.00049 5.25 2.00949 5.25 3.25049C5.25 3.72849 5.402 4.17049 5.658 4.53549C4.719 4.69949 4 5.51549 4 6.50049V9.50049C4 10.0515 4.448 10.5005 5 10.5005V13.5005C5 14.3275 5.673 15.0005 6.5 15.0005H8.5C9.327 15.0005 10 14.3275 10 13.5005V10.5005C10.552 10.5005 11 10.0515 11 9.50049V6.50049C11 5.51449 10.282 4.69849 9.342 4.53549ZM7.5 2.00049C8.189 2.00049 8.75 2.56149 8.75 3.25049C8.75 3.93949 8.189 4.50049 7.5 4.50049C6.811 4.50049 6.25 3.93949 6.25 3.25049C6.25 2.56149 6.811 2.00049 7.5 2.00049ZM10 9.50049H9V13.5005C9 13.7765 8.775 14.0005 8.5 14.0005H8V11.0005C8 10.7245 7.776 10.5005 7.5 10.5005C7.224 10.5005 7 10.7245 7 11.0005V14.0005H6.5C6.225 14.0005 6 13.7765 6 13.5005V9.50049H5V6.50049C5 5.94949 5.448 5.50049 6 5.50049H9C9.552 5.50049 10 5.94949 10 6.50049V9.50049Z"
/>
</svg>
);
}import { VscPerson } from "react-icons/vsc";
export function Example() {
return <VscPerson className="size-5" />;
}<svg
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.342 4.53549C9.597 4.17049 9.75 3.72849 9.75 3.25049C9.75 2.00949 8.74 1.00049 7.5 1.00049C6.26 1.00049 5.25 2.00949 5.25 3.25049C5.25 3.72849 5.402 4.17049 5.658 4.53549C4.719 4.69949 4 5.51549 4 6.50049V9.50049C4 10.0515 4.448 10.5005 5 10.5005V13.5005C5 14.3275 5.673 15.0005 6.5 15.0005H8.5C9.327 15.0005 10 14.3275 10 13.5005V10.5005C10.552 10.5005 11 10.0515 11 9.50049V6.50049C11 5.51449 10.282 4.69849 9.342 4.53549ZM7.5 2.00049C8.189 2.00049 8.75 2.56149 8.75 3.25049C8.75 3.93949 8.189 4.50049 7.5 4.50049C6.811 4.50049 6.25 3.93949 6.25 3.25049C6.25 2.56149 6.811 2.00049 7.5 2.00049ZM10 9.50049H9V13.5005C9 13.7765 8.775 14.0005 8.5 14.0005H8V11.0005C8 10.7245 7.776 10.5005 7.5 10.5005C7.224 10.5005 7 10.7245 7 11.0005V14.0005H6.5C6.225 14.0005 6 13.7765 6 13.5005V9.50049H5V6.50049C5 5.94949 5.448 5.50049 6 5.50049H9C9.552 5.50049 10 5.94949 10 6.50049V9.50049Z"
/>
</svg>"Person" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.