Hover the icon or press Play. Suggested motion: write. Pick another to preview it and update the animated code:
Pencil Ruler icon
A free pencil ruler icon from Game 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
- CC BY 3.0 license
- Project
- game-icons.net
npx shadcn@latest add https://ui.cuelark.com/r/icons/game-icons/pencil-ruler.jsonimport * as React from "react";
/**
* Pencil Ruler from Game Icons (https://game-icons.net/), CC BY 3.0.
* Via Cuelark UI: ui.cuelark.com/icons/game-icons/pencil-ruler. Sized in em, colored by currentColor.
*/
export function GiPencilRulerIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 512 512"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M429.5 30.83h-.8c-2.2.15-3.4.65-4.6 1.89L396.5 60.3l55.2 55.2 27.5-27.63c1.3-1.23 1.8-2.36 1.9-4.57.2-2.21-.3-5.43-1.8-9.16-2.8-7.46-9.2-16.67-17-24.45-7.8-7.78-17-14.18-24.5-17.05-3.2-1.26-6.1-1.81-8.3-1.83zm-320.6.32L31.15 108.9l9.91 9.9 27.56-27.55L81.36 104l-27.53 27.6 21.16 21.1 27.51-27.5 12.8 12.8-27.55 27.5 21.15 21.1 50.2-50.1 12.8 12.8-50.2 50.1 21.2 21.2 27.5-27.6 12.8 12.8-27.5 27.6 21.1 21.1 27.5-27.5 12.8 12.8-27.5 27.5 21.1 21.2 50.2-50.2 12.8 12.8-50.2 50.2 21.2 21.1 27.5-27.5 12.8 12.8-27.5 27.5 21.1 21.2 27.6-27.6 12.8 12.8-27.6 27.6 21.1 21.1 50.2-50.2 12.8 12.8-50.2 50.2 21.2 21.1 27.5-27.5 12.8 12.8-27.5 27.5 21.1 21.2 27.6-27.6 12.8 12.8-27.6 27.6 9.9 9.9 77.8-77.8zm274.9 41.89l-9.9 9.91 9.9 9.9 12.7 12.75 9.9 9.9 12.7 12.7 9.9 9.9 9.9-9.9zm-22.6 22.63L280 176.8l9.9 9.9 81.2-81.1zm22.6 22.63l-81.1 81.2 9.9 9.8 81.1-81.1zm22.6 22.6l-81.1 81.2 9.9 9.9 81.1-81.2zM176.8 280L72.68 384.2l9.9 9.9L186.7 289.9zm22.6 22.7L95.31 406.8l9.89 9.9 104.1-104.1zm22.7 22.6L117.9 429.4l9.9 9.9L232 335.2zM63.24 400.2l-12.12 30.3 30.4 30.4 30.28-12.1-6.6-6.6-12.72-12.8-9.9-9.9-12.73-12.7zm-19.39 48.5l-13 32.5 32.48-13z"
/>
</svg>
);
}import { GiPencilRuler } from "react-icons/gi";
export function Example() {
return <GiPencilRuler className="size-5" />;
}<svg
viewBox="0 0 512 512"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M429.5 30.83h-.8c-2.2.15-3.4.65-4.6 1.89L396.5 60.3l55.2 55.2 27.5-27.63c1.3-1.23 1.8-2.36 1.9-4.57.2-2.21-.3-5.43-1.8-9.16-2.8-7.46-9.2-16.67-17-24.45-7.8-7.78-17-14.18-24.5-17.05-3.2-1.26-6.1-1.81-8.3-1.83zm-320.6.32L31.15 108.9l9.91 9.9 27.56-27.55L81.36 104l-27.53 27.6 21.16 21.1 27.51-27.5 12.8 12.8-27.55 27.5 21.15 21.1 50.2-50.1 12.8 12.8-50.2 50.1 21.2 21.2 27.5-27.6 12.8 12.8-27.5 27.6 21.1 21.1 27.5-27.5 12.8 12.8-27.5 27.5 21.1 21.2 50.2-50.2 12.8 12.8-50.2 50.2 21.2 21.1 27.5-27.5 12.8 12.8-27.5 27.5 21.1 21.2 27.6-27.6 12.8 12.8-27.6 27.6 21.1 21.1 50.2-50.2 12.8 12.8-50.2 50.2 21.2 21.1 27.5-27.5 12.8 12.8-27.5 27.5 21.1 21.2 27.6-27.6 12.8 12.8-27.6 27.6 9.9 9.9 77.8-77.8zm274.9 41.89l-9.9 9.91 9.9 9.9 12.7 12.75 9.9 9.9 12.7 12.7 9.9 9.9 9.9-9.9zm-22.6 22.63L280 176.8l9.9 9.9 81.2-81.1zm22.6 22.63l-81.1 81.2 9.9 9.8 81.1-81.1zm22.6 22.6l-81.1 81.2 9.9 9.9 81.1-81.2zM176.8 280L72.68 384.2l9.9 9.9L186.7 289.9zm22.6 22.7L95.31 406.8l9.89 9.9 104.1-104.1zm22.7 22.6L117.9 429.4l9.9 9.9L232 335.2zM63.24 400.2l-12.12 30.3 30.4 30.4 30.28-12.1-6.6-6.6-12.72-12.8-9.9-9.9-12.73-12.7zm-19.39 48.5l-13 32.5 32.48-13z"
/>
</svg>"Pencil Ruler" icon from Game Icons (https://game-icons.net/), licensed under CC BY 3.0 license.