Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Layers icon
A free layers 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/layers.jsonimport * as React from "react";
/**
* Layers from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/layers. Sized in em, colored by currentColor.
*/
export function RxLayersIcon(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="M12.8378 10.2774C13.0576 10.2018 13.3077 10.2882 13.4306 10.4962C13.5531 10.7041 13.508 10.9642 13.3358 11.1202L13.2538 11.1808L7.75381 14.4308C7.59714 14.5231 7.40267 14.5231 7.246 14.4308L1.746 11.1808L1.66397 11.1202C1.49183 10.9643 1.44671 10.704 1.56924 10.4962C1.69212 10.2882 1.94221 10.2018 2.16202 10.2774L2.25381 10.3194L7.49991 13.419L12.746 10.3194L12.8378 10.2774ZM12.8378 7.27743C13.0576 7.20179 13.3077 7.28825 13.4306 7.49618C13.5531 7.70407 13.508 7.96425 13.3358 8.12021L13.2538 8.18075L7.75381 11.4308C7.59714 11.5231 7.40267 11.5231 7.246 11.4308L1.746 8.18075L1.66397 8.12021C1.49183 7.96425 1.44671 7.70405 1.56924 7.49618C1.69212 7.28825 1.94221 7.20183 2.16202 7.27743L2.25381 7.31942L7.49991 10.419L12.746 7.31942L12.8378 7.27743ZM7.30557 0.789151C7.45005 0.728211 7.6165 0.738495 7.75381 0.819425L13.2538 4.06942C13.4061 4.15938 13.4999 4.32326 13.4999 4.50009C13.4999 4.67692 13.4061 4.8408 13.2538 4.93075L7.75381 8.18075C7.59714 8.2731 7.40267 8.27312 7.246 8.18075L1.746 4.93075C1.5938 4.84079 1.49991 4.67689 1.49991 4.50009C1.49991 4.32328 1.5938 4.15939 1.746 4.06942L7.246 0.819425L7.30557 0.789151ZM2.98233 4.50009L7.49991 7.16903L12.0165 4.50009L7.49991 1.83017L2.98233 4.50009Z"
fill="currentColor"
/>
</svg>
);
}import { RxLayers } from "react-icons/rx";
export function Example() {
return <RxLayers 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="M12.8378 10.2774C13.0576 10.2018 13.3077 10.2882 13.4306 10.4962C13.5531 10.7041 13.508 10.9642 13.3358 11.1202L13.2538 11.1808L7.75381 14.4308C7.59714 14.5231 7.40267 14.5231 7.246 14.4308L1.746 11.1808L1.66397 11.1202C1.49183 10.9643 1.44671 10.704 1.56924 10.4962C1.69212 10.2882 1.94221 10.2018 2.16202 10.2774L2.25381 10.3194L7.49991 13.419L12.746 10.3194L12.8378 10.2774ZM12.8378 7.27743C13.0576 7.20179 13.3077 7.28825 13.4306 7.49618C13.5531 7.70407 13.508 7.96425 13.3358 8.12021L13.2538 8.18075L7.75381 11.4308C7.59714 11.5231 7.40267 11.5231 7.246 11.4308L1.746 8.18075L1.66397 8.12021C1.49183 7.96425 1.44671 7.70405 1.56924 7.49618C1.69212 7.28825 1.94221 7.20183 2.16202 7.27743L2.25381 7.31942L7.49991 10.419L12.746 7.31942L12.8378 7.27743ZM7.30557 0.789151C7.45005 0.728211 7.6165 0.738495 7.75381 0.819425L13.2538 4.06942C13.4061 4.15938 13.4999 4.32326 13.4999 4.50009C13.4999 4.67692 13.4061 4.8408 13.2538 4.93075L7.75381 8.18075C7.59714 8.2731 7.40267 8.27312 7.246 8.18075L1.746 4.93075C1.5938 4.84079 1.49991 4.67689 1.49991 4.50009C1.49991 4.32328 1.5938 4.15939 1.746 4.06942L7.246 0.819425L7.30557 0.789151ZM2.98233 4.50009L7.49991 7.16903L12.0165 4.50009L7.49991 1.83017L2.98233 4.50009Z"
fill="currentColor"
/>
</svg>"Layers" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.