Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:
Directions icon
A free directions icon from Simple Line 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
- thesabbir.github.io
npx shadcn@latest add https://ui.cuelark.com/r/icons/simple-line-icons/directions.jsonimport * as React from "react";
/**
* Directions from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), MIT.
* Via Cuelark UI: ui.cuelark.com/icons/simple-line-icons/directions. Sized in em, colored by currentColor.
*/
export function SlDirectionsIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 1024 1024"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M1017.06 186.064L917.364 74.721a31.964 31.964 0 0 0-23.937-10.752H543.171V30.001c0-16.56-14.336-30-32-30s-32 13.44-32 30V63.97H223.363c-17.68 0-32 14.32-32 32v223.664c0 17.68 14.32 32 32 32h255.808v64.096H130.58a31.963 31.963 0 0 0-23.936 10.752L6.963 539.793c-10.752 12.128-10.752 30.368 0 42.496l99.68 112.288c6.112 6.847 14.784 9.744 23.936 9.744h348.592V994c0 16.56 14.336 30 32 30s32-13.44 32-30V704.32h256.464c17.68 0 32-14.32 32-32V447.713c0-17.68-14.32-32-32-32H543.171v-64.096h350.256a31.963 31.963 0 0 0 23.937-10.752l99.696-112.32c10.736-12.112 10.736-30.352 0-42.48v-.001zM767.647 640.321H144.959l-71.28-79.28 71.28-81.312h622.688v160.592zm111.392-352.688h-623.68V127.969h623.68l71.28 79.344z"
/>
</svg>
);
}import { SlDirections } from "react-icons/sl";
export function Example() {
return <SlDirections className="size-5" />;
}<svg
viewBox="0 0 1024 1024"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1017.06 186.064L917.364 74.721a31.964 31.964 0 0 0-23.937-10.752H543.171V30.001c0-16.56-14.336-30-32-30s-32 13.44-32 30V63.97H223.363c-17.68 0-32 14.32-32 32v223.664c0 17.68 14.32 32 32 32h255.808v64.096H130.58a31.963 31.963 0 0 0-23.936 10.752L6.963 539.793c-10.752 12.128-10.752 30.368 0 42.496l99.68 112.288c6.112 6.847 14.784 9.744 23.936 9.744h348.592V994c0 16.56 14.336 30 32 30s32-13.44 32-30V704.32h256.464c17.68 0 32-14.32 32-32V447.713c0-17.68-14.32-32-32-32H543.171v-64.096h350.256a31.963 31.963 0 0 0 23.937-10.752l99.696-112.32c10.736-12.112 10.736-30.352 0-42.48v-.001zM767.647 640.321H144.959l-71.28-79.28 71.28-81.312h622.688v160.592zm111.392-352.688h-623.68V127.969h623.68l71.28 79.344z"
/>
</svg>"Directions" icon from Simple Line Icons (https://thesabbir.github.io/simple-line-icons/), licensed under MIT license.