Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Padding icon
A free padding 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/padding.jsonimport * as React from "react";
/**
* Padding from Radix Icons (https://icons.radix-ui.com), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/radix/padding. Sized in em, colored by currentColor.
*/
export function RxPaddingIcon(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.333 1.00977C13.2693 1.105 14 1.89595 14 2.85742V12.1426L13.9902 12.333C13.9014 13.2068 13.2068 13.9014 12.333 13.9902L12.1426 14H2.85742L2.66699 13.9902C1.79318 13.9014 1.09864 13.2068 1.00977 12.333L1 12.1426V2.85742C1 1.89595 1.73065 1.105 2.66699 1.00977L2.85742 1H12.1426L12.333 1.00977ZM2.85742 2C2.38403 2 2 2.38404 2 2.85742V12.1426C2 12.616 2.38404 13 2.85742 13H12.1426C12.616 13 13 12.616 13 12.1426V2.85742C13 2.38403 12.616 2 12.1426 2H2.85742ZM4.5 10C4.77605 10.0001 4.99993 10.224 5 10.5C5 10.7761 4.77609 10.9999 4.5 11C4.22386 11 4 10.7761 4 10.5C4.00007 10.2239 4.2239 10 4.5 10ZM7.5 10C7.77605 10.0001 7.99993 10.224 8 10.5C8 10.7761 7.77609 10.9999 7.5 11C7.22386 11 7 10.7761 7 10.5C7.00007 10.2239 7.2239 10 7.5 10ZM10.5 10C10.776 10.0001 10.9999 10.224 11 10.5C11 10.7761 10.7761 10.9999 10.5 11C10.2239 11 10 10.7761 10 10.5C10.0001 10.2239 10.2239 10 10.5 10ZM4.5 7C4.77605 7.00007 4.99993 7.22395 5 7.5C5 7.7761 4.77609 7.99993 4.5 8C4.22386 8 4 7.77614 4 7.5C4.00007 7.22391 4.2239 7 4.5 7ZM10.5 7C10.776 7.00007 10.9999 7.22395 11 7.5C11 7.7761 10.7761 7.99993 10.5 8C10.2239 8 10 7.77614 10 7.5C10.0001 7.22391 10.2239 7 10.5 7ZM4.5 4C4.77605 4.00007 4.99993 4.22395 5 4.5C5 4.7761 4.77609 4.99993 4.5 5C4.22386 5 4 4.77614 4 4.5C4.00007 4.22391 4.2239 4 4.5 4ZM7.5 4C7.77605 4.00007 7.99993 4.22395 8 4.5C8 4.7761 7.77609 4.99993 7.5 5C7.22386 5 7 4.77614 7 4.5C7.00007 4.22391 7.2239 4 7.5 4ZM10.5 4C10.776 4.00007 10.9999 4.22395 11 4.5C11 4.7761 10.7761 4.99993 10.5 5C10.2239 5 10 4.77614 10 4.5C10.0001 4.22391 10.2239 4 10.5 4Z"
fill="currentColor"
/>
</svg>
);
}import { RxPadding } from "react-icons/rx";
export function Example() {
return <RxPadding 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.333 1.00977C13.2693 1.105 14 1.89595 14 2.85742V12.1426L13.9902 12.333C13.9014 13.2068 13.2068 13.9014 12.333 13.9902L12.1426 14H2.85742L2.66699 13.9902C1.79318 13.9014 1.09864 13.2068 1.00977 12.333L1 12.1426V2.85742C1 1.89595 1.73065 1.105 2.66699 1.00977L2.85742 1H12.1426L12.333 1.00977ZM2.85742 2C2.38403 2 2 2.38404 2 2.85742V12.1426C2 12.616 2.38404 13 2.85742 13H12.1426C12.616 13 13 12.616 13 12.1426V2.85742C13 2.38403 12.616 2 12.1426 2H2.85742ZM4.5 10C4.77605 10.0001 4.99993 10.224 5 10.5C5 10.7761 4.77609 10.9999 4.5 11C4.22386 11 4 10.7761 4 10.5C4.00007 10.2239 4.2239 10 4.5 10ZM7.5 10C7.77605 10.0001 7.99993 10.224 8 10.5C8 10.7761 7.77609 10.9999 7.5 11C7.22386 11 7 10.7761 7 10.5C7.00007 10.2239 7.2239 10 7.5 10ZM10.5 10C10.776 10.0001 10.9999 10.224 11 10.5C11 10.7761 10.7761 10.9999 10.5 11C10.2239 11 10 10.7761 10 10.5C10.0001 10.2239 10.2239 10 10.5 10ZM4.5 7C4.77605 7.00007 4.99993 7.22395 5 7.5C5 7.7761 4.77609 7.99993 4.5 8C4.22386 8 4 7.77614 4 7.5C4.00007 7.22391 4.2239 7 4.5 7ZM10.5 7C10.776 7.00007 10.9999 7.22395 11 7.5C11 7.7761 10.7761 7.99993 10.5 8C10.2239 8 10 7.77614 10 7.5C10.0001 7.22391 10.2239 7 10.5 7ZM4.5 4C4.77605 4.00007 4.99993 4.22395 5 4.5C5 4.7761 4.77609 4.99993 4.5 5C4.22386 5 4 4.77614 4 4.5C4.00007 4.22391 4.2239 4 4.5 4ZM7.5 4C7.77605 4.00007 7.99993 4.22395 8 4.5C8 4.7761 7.77609 4.99993 7.5 5C7.22386 5 7 4.77614 7 4.5C7.00007 4.22391 7.2239 4 7.5 4ZM10.5 4C10.776 4.00007 10.9999 4.22395 11 4.5C11 4.7761 10.7761 4.99993 10.5 5C10.2239 5 10 4.77614 10 4.5C10.0001 4.22391 10.2239 4 10.5 4Z"
fill="currentColor"
/>
</svg>"Padding" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.