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

Radix Icons · RxRulerSquare

Ruler Square icon

A free ruler square 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/ruler-square.json

components/icons/radix-ruler-square.tsx

import * as React from "react";

/**
 * Ruler Square from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/ruler-square. Sized in em, colored by currentColor.
 */
export function RxRulerSquareIcon(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="M14.6006 0.00976562C14.8286 0.056292 15 0.258287 15 0.5V4.5C15 4.77614 14.7761 5 14.5 5H5V14.5C5 14.7761 4.77614 15 4.5 15H0.5C0.223858 15 0 14.7761 0 14.5V0.5L0.00976562 0.399414C0.056292 0.171447 0.258287 0 0.5 0H14.5L14.6006 0.00976562ZM1 4.9248V14H4V12.9248H2.75C2.51529 12.9248 2.3252 12.7347 2.3252 12.5C2.32521 12.2653 2.5153 12.0752 2.75 12.0752H4V10.9248H2.25C2.01529 10.9248 1.8252 10.7347 1.8252 10.5C1.82521 10.2653 2.0153 10.0752 2.25 10.0752H4V8.9248H2.75C2.51529 8.92479 2.32519 8.73471 2.3252 8.5C2.32521 8.2653 2.5153 8.07521 2.75 8.0752H4V6.9248H2.75C2.51528 6.9248 2.32519 6.73472 2.3252 6.5C2.3252 6.26528 2.51528 6.0752 2.75 6.0752H4V4.9248H1ZM1 4.0752H4.0752V1H1V4.0752ZM4.9248 4H6.0752V2.75C6.07523 2.51531 6.2653 2.3252 6.5 2.3252C6.7347 2.3252 6.92477 2.51531 6.9248 2.75V4H8.0752V2.75C8.07522 2.51531 8.2653 2.32521 8.5 2.3252C8.7347 2.3252 8.92478 2.5153 8.9248 2.75V4H10.0752V2.25C10.0752 2.01532 10.2653 1.82523 10.5 1.8252C10.7347 1.8252 10.9248 2.0153 10.9248 2.25V4H12.0752V2.75C12.0752 2.51533 12.2653 2.32523 12.5 2.3252C12.7347 2.3252 12.9248 2.5153 12.9248 2.75V4H14V1H4.9248V4Z"
        fill="currentColor"
      />
    </svg>
  );
}

With react-icons

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

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

ruler-square.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="M14.6006 0.00976562C14.8286 0.056292 15 0.258287 15 0.5V4.5C15 4.77614 14.7761 5 14.5 5H5V14.5C5 14.7761 4.77614 15 4.5 15H0.5C0.223858 15 0 14.7761 0 14.5V0.5L0.00976562 0.399414C0.056292 0.171447 0.258287 0 0.5 0H14.5L14.6006 0.00976562ZM1 4.9248V14H4V12.9248H2.75C2.51529 12.9248 2.3252 12.7347 2.3252 12.5C2.32521 12.2653 2.5153 12.0752 2.75 12.0752H4V10.9248H2.25C2.01529 10.9248 1.8252 10.7347 1.8252 10.5C1.82521 10.2653 2.0153 10.0752 2.25 10.0752H4V8.9248H2.75C2.51529 8.92479 2.32519 8.73471 2.3252 8.5C2.32521 8.2653 2.5153 8.07521 2.75 8.0752H4V6.9248H2.75C2.51528 6.9248 2.32519 6.73472 2.3252 6.5C2.3252 6.26528 2.51528 6.0752 2.75 6.0752H4V4.9248H1ZM1 4.0752H4.0752V1H1V4.0752ZM4.9248 4H6.0752V2.75C6.07523 2.51531 6.2653 2.3252 6.5 2.3252C6.7347 2.3252 6.92477 2.51531 6.9248 2.75V4H8.0752V2.75C8.07522 2.51531 8.2653 2.32521 8.5 2.3252C8.7347 2.3252 8.92478 2.5153 8.9248 2.75V4H10.0752V2.25C10.0752 2.01532 10.2653 1.82523 10.5 1.8252C10.7347 1.8252 10.9248 2.0153 10.9248 2.25V4H12.0752V2.75C12.0752 2.51533 12.2653 2.32523 12.5 2.3252C12.7347 2.3252 12.9248 2.5153 12.9248 2.75V4H14V1H4.9248V4Z"
    fill="currentColor"
  />
</svg>

Attribution

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

Related icons:

Similar Radix Icons icons