Free Ruler SVG icon in outline, twotone, bold and bulk. Available in all four styles, for editors, canvas, layers, colour, alignment, grids. Copy the SVG or a tree-shakeable React component, or download a PNG.
import { IconRuler } from "@devigner-ui/icons";
<IconRuler className="size-6" />
<script setup>
import { IconRuler } from "@devigner-ui/icons-vue";
</script>
<template>
<IconRuler class="size-6" />
</template>
<script>
import { IconRuler } from "@devigner-ui/icons-svelte";
</script>
<IconRuler class="size-6" />
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.05 18.5C2.68 17.15 2 16.47 2 15.63s.68-1.53 2.05-2.9l8.67-8.67C14.1 2.68 14.77 2 15.62 2c.84 0 1.52.68 2.89 2.05l1.44 1.44C21.32 6.86 22 7.54 22 8.4c0 .84-.68 1.52-2.05 2.89l-8.67 8.67C9.9 21.32 9.23 22 8.38 22c-.84 0-1.52-.68-2.89-2.05z" stroke="currentColor" stroke-width="1.5"></path><path opacity="1" d="m8.46 8.46 1.42 1.42" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path opacity="1" d="m12.7 4.22 1.42 1.42" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path opacity="1" d="m4.22 12.7 1.42 1.42" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path opacity="1" d="m6.34 10.59 2.12 2.12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><path opacity="1" d="m10.59 6.34 2.12 2.12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path></svg>