Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Letter Case Toggle icon
A free letter case toggle 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/letter-case-toggle.jsonimport * as React from "react";
/**
* Letter Case Toggle from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/letter-case-toggle. Sized in em, colored by currentColor.
*/
export function RxLetterCaseToggleIcon(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="M11.2891 2.74992C11.4959 2.7498 11.6814 2.87731 11.7559 3.07023L14.9658 11.3893L14.9931 11.487C15.0318 11.7163 14.9049 11.9487 14.6796 12.0358C14.4542 12.1227 14.2045 12.0353 14.0791 11.8395L14.0332 11.7497L12.9824 9.02513H9.61044L8.56653 11.7487L8.52063 11.8395C8.39552 12.035 8.1463 12.1228 7.92104 12.0368C7.6633 11.9379 7.53415 11.6481 7.63296 11.3903L10.8233 3.0712L10.8555 3.00187C10.9434 2.84803 11.1082 2.75023 11.2891 2.74992ZM2.89872 5.20688C3.79233 5.20688 4.60458 5.60197 5.15354 6.22443V5.71956C5.15369 5.4713 5.35547 5.26959 5.60372 5.26938C5.85215 5.26938 6.05376 5.47117 6.0539 5.71956V11.529C6.0539 11.7775 5.85224 11.9792 5.60372 11.9792C5.35538 11.9789 5.15354 11.7774 5.15354 11.529V11.0192C4.57351 11.6672 3.72158 12.0124 2.89872 12.0124C1.35806 12.0123 0.00915501 10.633 0.00915501 8.60913C0.00930358 6.68538 1.25817 5.20697 2.89872 5.20688ZM3.08622 6.05744C2.10849 6.05772 1.03557 6.9658 1.03549 8.60913C1.03549 10.1526 2.00852 11.1605 3.08622 11.1608C3.97048 11.1608 4.77161 10.4924 5.15354 9.79464V7.30546C4.76371 6.58316 3.94195 6.05744 3.08622 6.05744ZM9.93661 8.17555H12.6543L11.2911 4.64245L9.93661 8.17555Z"
fill="currentColor"
/>
</svg>
);
}import { RxLetterCaseToggle } from "react-icons/rx";
export function Example() {
return <RxLetterCaseToggle 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="M11.2891 2.74992C11.4959 2.7498 11.6814 2.87731 11.7559 3.07023L14.9658 11.3893L14.9931 11.487C15.0318 11.7163 14.9049 11.9487 14.6796 12.0358C14.4542 12.1227 14.2045 12.0353 14.0791 11.8395L14.0332 11.7497L12.9824 9.02513H9.61044L8.56653 11.7487L8.52063 11.8395C8.39552 12.035 8.1463 12.1228 7.92104 12.0368C7.6633 11.9379 7.53415 11.6481 7.63296 11.3903L10.8233 3.0712L10.8555 3.00187C10.9434 2.84803 11.1082 2.75023 11.2891 2.74992ZM2.89872 5.20688C3.79233 5.20688 4.60458 5.60197 5.15354 6.22443V5.71956C5.15369 5.4713 5.35547 5.26959 5.60372 5.26938C5.85215 5.26938 6.05376 5.47117 6.0539 5.71956V11.529C6.0539 11.7775 5.85224 11.9792 5.60372 11.9792C5.35538 11.9789 5.15354 11.7774 5.15354 11.529V11.0192C4.57351 11.6672 3.72158 12.0124 2.89872 12.0124C1.35806 12.0123 0.00915501 10.633 0.00915501 8.60913C0.00930358 6.68538 1.25817 5.20697 2.89872 5.20688ZM3.08622 6.05744C2.10849 6.05772 1.03557 6.9658 1.03549 8.60913C1.03549 10.1526 2.00852 11.1605 3.08622 11.1608C3.97048 11.1608 4.77161 10.4924 5.15354 9.79464V7.30546C4.76371 6.58316 3.94195 6.05744 3.08622 6.05744ZM9.93661 8.17555H12.6543L11.2911 4.64245L9.93661 8.17555Z"
fill="currentColor"
/>
</svg>"Letter Case Toggle" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.