Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Radix Icons · RxTransform

Transform icon

A free transform 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

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/radix/transform.json

components/icons/radix-transform.tsx

import * as React from "react";

/**
 * Transform from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/transform. Sized in em, colored by currentColor.
 */
export function RxTransformIcon(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="M3.34219 0.854889C3.79593 0.901066 4.15079 1.28447 4.15079 1.7504V2.0502H10.85V1.7504C10.85 1.25334 11.2533 0.850006 11.7504 0.850006H13.2504L13.3422 0.854889C13.7959 0.901066 14.1508 1.28447 14.1508 1.7504V3.2504L14.1459 3.34219C14.0998 3.79584 13.7162 4.15059 13.2504 4.15079H12.9506V10.85H13.2504L13.3422 10.8549C13.7959 10.9011 14.1508 11.2845 14.1508 11.7504V13.2504L14.1459 13.3422C14.0998 13.7958 13.7162 14.1506 13.2504 14.1508H11.7504C11.2535 14.1508 10.8502 13.7473 10.85 13.2504V12.9506H4.15079V13.2504L4.1459 13.3422C4.09978 13.7958 3.71617 14.1506 3.2504 14.1508H1.7504C1.25347 14.1508 0.850218 13.7473 0.850006 13.2504V11.7504C0.850006 11.2533 1.25334 10.85 1.7504 10.85H2.0502V4.15079H1.7504C1.25347 4.15079 0.850217 3.74727 0.850006 3.2504V1.7504C0.850006 1.25334 1.25334 0.850006 1.7504 0.850006H3.2504L3.34219 0.854889ZM1.7504 13.2504H3.2504V11.7504H1.7504V13.2504ZM11.7504 13.2504H13.2504V11.7504H11.7504V13.2504ZM4.15079 2.95059V3.2504L4.1459 3.34219C4.09978 3.79584 3.71617 4.15059 3.2504 4.15079H2.95059V10.85H3.2504L3.34219 10.8549C3.79593 10.9011 4.15079 11.2845 4.15079 11.7504V12.0502H10.85V11.7504C10.85 11.2533 11.2533 10.85 11.7504 10.85H12.0502V4.15079H11.7504C11.2535 4.15079 10.8502 3.74727 10.85 3.2504V2.95059H4.15079ZM7.09219 5.10489C7.54593 5.15107 7.90079 5.53447 7.90079 6.0004V7.0004L7.8959 7.09219C7.89543 7.09681 7.89351 7.10127 7.89297 7.10587C7.92807 7.1017 7.96418 7.10001 8.0004 7.10001H9.0004L9.09219 7.10489C9.54593 7.15107 9.90079 7.53447 9.90079 8.0004V9.0004L9.8959 9.09219C9.84978 9.54584 9.46617 9.90059 9.0004 9.90079H8.0004C7.50347 9.90079 7.10022 9.49727 7.10001 9.0004V8.0004C7.10001 7.96418 7.1017 7.92807 7.10587 7.89297C7.07122 7.89704 7.03613 7.90077 7.0004 7.90079H6.0004C5.50347 7.90079 5.10022 7.49727 5.10001 7.0004V6.0004C5.10001 5.50334 5.50334 5.10001 6.0004 5.10001H7.0004L7.09219 5.10489ZM8.0004 9.0004H9.0004V8.0004H8.0004V9.0004ZM6.0004 7.0004H7.0004V6.0004H6.0004V7.0004ZM1.7504 3.2504H3.2504V1.7504H1.7504V3.2504ZM11.7504 3.2504H13.2504V1.7504H11.7504V3.2504Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

import { RxTransform } from "react-icons/rx";

export function Example() {
  return <RxTransform className="size-5" />;
}

transform.svg

<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="M3.34219 0.854889C3.79593 0.901066 4.15079 1.28447 4.15079 1.7504V2.0502H10.85V1.7504C10.85 1.25334 11.2533 0.850006 11.7504 0.850006H13.2504L13.3422 0.854889C13.7959 0.901066 14.1508 1.28447 14.1508 1.7504V3.2504L14.1459 3.34219C14.0998 3.79584 13.7162 4.15059 13.2504 4.15079H12.9506V10.85H13.2504L13.3422 10.8549C13.7959 10.9011 14.1508 11.2845 14.1508 11.7504V13.2504L14.1459 13.3422C14.0998 13.7958 13.7162 14.1506 13.2504 14.1508H11.7504C11.2535 14.1508 10.8502 13.7473 10.85 13.2504V12.9506H4.15079V13.2504L4.1459 13.3422C4.09978 13.7958 3.71617 14.1506 3.2504 14.1508H1.7504C1.25347 14.1508 0.850218 13.7473 0.850006 13.2504V11.7504C0.850006 11.2533 1.25334 10.85 1.7504 10.85H2.0502V4.15079H1.7504C1.25347 4.15079 0.850217 3.74727 0.850006 3.2504V1.7504C0.850006 1.25334 1.25334 0.850006 1.7504 0.850006H3.2504L3.34219 0.854889ZM1.7504 13.2504H3.2504V11.7504H1.7504V13.2504ZM11.7504 13.2504H13.2504V11.7504H11.7504V13.2504ZM4.15079 2.95059V3.2504L4.1459 3.34219C4.09978 3.79584 3.71617 4.15059 3.2504 4.15079H2.95059V10.85H3.2504L3.34219 10.8549C3.79593 10.9011 4.15079 11.2845 4.15079 11.7504V12.0502H10.85V11.7504C10.85 11.2533 11.2533 10.85 11.7504 10.85H12.0502V4.15079H11.7504C11.2535 4.15079 10.8502 3.74727 10.85 3.2504V2.95059H4.15079ZM7.09219 5.10489C7.54593 5.15107 7.90079 5.53447 7.90079 6.0004V7.0004L7.8959 7.09219C7.89543 7.09681 7.89351 7.10127 7.89297 7.10587C7.92807 7.1017 7.96418 7.10001 8.0004 7.10001H9.0004L9.09219 7.10489C9.54593 7.15107 9.90079 7.53447 9.90079 8.0004V9.0004L9.8959 9.09219C9.84978 9.54584 9.46617 9.90059 9.0004 9.90079H8.0004C7.50347 9.90079 7.10022 9.49727 7.10001 9.0004V8.0004C7.10001 7.96418 7.1017 7.92807 7.10587 7.89297C7.07122 7.89704 7.03613 7.90077 7.0004 7.90079H6.0004C5.50347 7.90079 5.10022 7.49727 5.10001 7.0004V6.0004C5.10001 5.50334 5.50334 5.10001 6.0004 5.10001H7.0004L7.09219 5.10489ZM8.0004 9.0004H9.0004V8.0004H8.0004V9.0004ZM6.0004 7.0004H7.0004V6.0004H6.0004V7.0004ZM1.7504 3.2504H3.2504V1.7504H1.7504V3.2504ZM11.7504 3.2504H13.2504V1.7504H11.7504V3.2504Z"
    fill="currentColor"
  />
</svg>

Attribution

"Transform" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Transform icon in other sets

Similar Radix Icons icons