Skip to content
Cuelark UI

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

Radix Icons · RxRulerHorizontal

Ruler Horizontal icon

A free ruler horizontal 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-horizontal.json
components/icons/radix-ruler-horizontal.tsx
import * as React from "react";

/**
 * Ruler Horizontal from Radix Icons (https://icons.radix-ui.com), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/radix/ruler-horizontal. Sized in em, colored by currentColor.
 */
export function RxRulerHorizontalIcon(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 4.00977C14.8286 4.05629 15 4.25829 15 4.5V10.5C15 10.7761 14.7761 11 14.5 11H0.5C0.223858 11 0 10.7761 0 10.5V4.5L0.00976562 4.39941C0.056292 4.17145 0.258287 4 0.5 4H14.5L14.6006 4.00977ZM1 10H14V5H12.9248V6.5C12.9248 6.73472 12.7347 6.9248 12.5 6.9248C12.2653 6.9248 12.0752 6.73472 12.0752 6.5V5H10.9248V6.5C10.9248 6.73472 10.7347 6.9248 10.5 6.9248C10.2653 6.9248 10.0752 6.73472 10.0752 6.5V5H8.9248V7.5C8.9248 7.73472 8.73472 7.9248 8.5 7.9248C8.26528 7.9248 8.0752 7.73472 8.0752 7.5V5H6.9248V6.5C6.9248 6.73472 6.73472 6.9248 6.5 6.9248C6.26528 6.9248 6.0752 6.73472 6.0752 6.5V5H4.9248V6.5C4.9248 6.73472 4.73472 6.9248 4.5 6.9248C4.26528 6.9248 4.0752 6.73472 4.0752 6.5V5H2.9248V7.5C2.9248 7.73472 2.73472 7.9248 2.5 7.9248C2.26528 7.9248 2.0752 7.73472 2.0752 7.5V5H1V10Z"
        fill="currentColor"
      />
    </svg>
  );
}
With react-icons
import { RxRulerHorizontal } from "react-icons/rx";

export function Example() {
  return <RxRulerHorizontal className="size-5" />;
}
ruler-horizontal.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 4.00977C14.8286 4.05629 15 4.25829 15 4.5V10.5C15 10.7761 14.7761 11 14.5 11H0.5C0.223858 11 0 10.7761 0 10.5V4.5L0.00976562 4.39941C0.056292 4.17145 0.258287 4 0.5 4H14.5L14.6006 4.00977ZM1 10H14V5H12.9248V6.5C12.9248 6.73472 12.7347 6.9248 12.5 6.9248C12.2653 6.9248 12.0752 6.73472 12.0752 6.5V5H10.9248V6.5C10.9248 6.73472 10.7347 6.9248 10.5 6.9248C10.2653 6.9248 10.0752 6.73472 10.0752 6.5V5H8.9248V7.5C8.9248 7.73472 8.73472 7.9248 8.5 7.9248C8.26528 7.9248 8.0752 7.73472 8.0752 7.5V5H6.9248V6.5C6.9248 6.73472 6.73472 6.9248 6.5 6.9248C6.26528 6.9248 6.0752 6.73472 6.0752 6.5V5H4.9248V6.5C4.9248 6.73472 4.73472 6.9248 4.5 6.9248C4.26528 6.9248 4.0752 6.73472 4.0752 6.5V5H2.9248V7.5C2.9248 7.73472 2.73472 7.9248 2.5 7.9248C2.26528 7.9248 2.0752 7.73472 2.0752 7.5V5H1V10Z"
    fill="currentColor"
  />
</svg>
Attribution
"Ruler Horizontal" icon from Radix Icons (https://icons.radix-ui.com), licensed under MIT license.

Related icons:

Ruler Horizontal icon in other sets