Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Text Size icon
A free text size 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/text-size.jsonimport * as React from "react";
/**
* Text Size from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/text-size. Sized in em, colored by currentColor.
*/
export function VscTextSizeIcon(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="M10.9699 2.32913C10.8981 2.13153 10.7103 2 10.5 2C10.2898 2 10.102 2.13153 10.0301 2.32913L6.46834 12.124L6.13267 11.3184C6.12991 11.3113 6.12699 11.3043 6.12391 11.2974L4.46155 7.30769C4.38391 7.12137 4.20186 7 4.00001 7C3.79816 7 3.6161 7.12137 3.53847 7.30769L1.8761 11.2974C1.87303 11.3043 1.87011 11.3113 1.86735 11.3184L1.03847 13.3077C0.932261 13.5626 1.0528 13.8553 1.3077 13.9615C1.5626 14.0677 1.85534 13.9472 1.96155 13.6923L2.66667 12H5.33334L6.03776 13.6906C6.03897 13.6935 6.04021 13.6965 6.04148 13.6994C6.06887 13.7624 6.10777 13.817 6.15467 13.8618C6.20148 13.9065 6.25776 13.9428 6.32193 13.9672C6.33406 13.9718 6.34638 13.976 6.35885 13.9797C6.46237 14.0102 6.56886 14.0056 6.66467 13.9721C6.67641 13.968 6.688 13.9635 6.69939 13.9585C6.76233 13.9312 6.81686 13.8924 6.86155 13.8456C6.90638 13.7987 6.94275 13.7423 6.96722 13.6781C6.96834 13.6751 6.96944 13.6722 6.9705 13.6692L8.30477 10H12.6952L14.0301 13.6709C14.1245 13.9304 14.4114 14.0643 14.6709 13.9699C14.9304 13.8755 15.0643 13.5886 14.9699 13.3291L10.9699 2.32913ZM10.5 3.96309L12.3316 9H8.6684L10.5 3.96309ZM4.00001 8.8L4.91668 11H3.08334L4.00001 8.8Z"
/>
</svg>
);
}import { VscTextSize } from "react-icons/vsc";
export function Example() {
return <VscTextSize 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="M10.9699 2.32913C10.8981 2.13153 10.7103 2 10.5 2C10.2898 2 10.102 2.13153 10.0301 2.32913L6.46834 12.124L6.13267 11.3184C6.12991 11.3113 6.12699 11.3043 6.12391 11.2974L4.46155 7.30769C4.38391 7.12137 4.20186 7 4.00001 7C3.79816 7 3.6161 7.12137 3.53847 7.30769L1.8761 11.2974C1.87303 11.3043 1.87011 11.3113 1.86735 11.3184L1.03847 13.3077C0.932261 13.5626 1.0528 13.8553 1.3077 13.9615C1.5626 14.0677 1.85534 13.9472 1.96155 13.6923L2.66667 12H5.33334L6.03776 13.6906C6.03897 13.6935 6.04021 13.6965 6.04148 13.6994C6.06887 13.7624 6.10777 13.817 6.15467 13.8618C6.20148 13.9065 6.25776 13.9428 6.32193 13.9672C6.33406 13.9718 6.34638 13.976 6.35885 13.9797C6.46237 14.0102 6.56886 14.0056 6.66467 13.9721C6.67641 13.968 6.688 13.9635 6.69939 13.9585C6.76233 13.9312 6.81686 13.8924 6.86155 13.8456C6.90638 13.7987 6.94275 13.7423 6.96722 13.6781C6.96834 13.6751 6.96944 13.6722 6.9705 13.6692L8.30477 10H12.6952L14.0301 13.6709C14.1245 13.9304 14.4114 14.0643 14.6709 13.9699C14.9304 13.8755 15.0643 13.5886 14.9699 13.3291L10.9699 2.32913ZM10.5 3.96309L12.3316 9H8.6684L10.5 3.96309ZM4.00001 8.8L4.91668 11H3.08334L4.00001 8.8Z"
/>
</svg>"Text Size" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.