Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Transparency Grid icon
A free transparency grid 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/transparency-grid.jsonimport * as React from "react";
/**
* Transparency Grid from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/transparency-grid. Sized in em, colored by currentColor.
*/
export function RxTransparencyGridIcon(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
opacity=".25"
d="M3 15H0V12H3V15ZM9 15H6V12H9V15ZM15 15H12V12H15V15ZM6 12H3V9H6V12ZM12 12H9V9H12V12ZM3 9H0V6H3V9ZM9 9H6V6H9V9ZM15 9H12V6H15V9ZM6 6H3V3H6V6ZM12 6H9V3H12V6ZM3 3H0V0H3V3ZM9 3H6V0H9V3ZM15 3H12V0H15V3Z"
fill="currentColor"
/>
</svg>
);
}import { RxTransparencyGrid } from "react-icons/rx";
export function Example() {
return <RxTransparencyGrid 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
opacity=".25"
d="M3 15H0V12H3V15ZM9 15H6V12H9V15ZM15 15H12V12H15V15ZM6 12H3V9H6V12ZM12 12H9V9H12V12ZM3 9H0V6H3V9ZM9 9H6V6H9V9ZM15 9H12V6H15V9ZM6 6H3V3H6V6ZM12 6H9V3H12V6ZM3 3H0V0H3V3ZM9 3H6V0H9V3ZM15 3H12V0H15V3Z"
fill="currentColor"
/>
</svg>"Transparency Grid" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.