Hover the icon or press Play. Suggested motion: grow. Pick another to preview it and update the animated code:
Graph Left icon
A free graph left icon from VS Code 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 4.0 license
- Project
- github.com
npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/graph-left.jsonimport * as React from "react";
/**
* Graph Left from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
* Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/graph-left. Sized in em, colored by currentColor.
*/
export function VscGraphLeftIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
aria-hidden="true"
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
strokeWidth="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M6.25001 4.99998H4.75001C4.33601 4.99998 4.00001 5.33598 4.00001 5.74998V14.25C4.00001 14.663 4.33601 15 4.75001 15H6.25001C6.66401 15 7.00001 14.663 7.00001 14.25V5.74998C7.00001 5.33598 6.66401 4.99998 6.25001 4.99998ZM6.00001 14H5.00001V5.99998H6.00001V14Z"
/>
<path
d="M10.25 4.99998H8.75001C8.33601 4.99998 8.00001 5.33598 8.00001 5.74998V12.25C8.00001 12.663 8.33601 13 8.75001 13H10.25C10.664 13 11 12.663 11 12.25V5.74998C11 5.33598 10.664 4.99998 10.25 4.99998ZM10 12H9.00001V5.99998H10V12Z"
/>
<path
d="M14.25 4.99998H12.75C12.336 4.99998 12 5.33598 12 5.74998V10.25C12 10.663 12.336 11 12.75 11H14.25C14.664 11 15 10.663 15 10.25V5.74998C15 5.33598 14.664 4.99998 14.25 4.99998ZM14 9.99998H13V5.99998H14V9.99998Z"
/>
<path
d="M2.70701 2.99998H14.5C14.776 2.99998 15 2.77598 15 2.49998C15 2.22398 14.776 1.99998 14.5 1.99998H2.70701L3.35301 1.35398C3.54801 1.15898 3.54801 0.841982 3.35301 0.646982C3.15801 0.451982 2.84101 0.451982 2.64601 0.646982L1.14601 2.14698C0.951006 2.34198 0.951006 2.65898 1.14601 2.85398L2.64601 4.35398C2.74401 4.45198 2.87201 4.49998 3.00001 4.49998C3.12801 4.49998 3.25601 4.45098 3.35401 4.35398C3.54901 4.15898 3.54901 3.84198 3.35401 3.64698L2.70701 2.99998Z"
/>
</svg>
);
}import { VscGraphLeft } from "react-icons/vsc";
export function Example() {
return <VscGraphLeft className="size-5" />;
}<svg
viewBox="0 0 16 16"
stroke="currentColor"
fill="currentColor"
stroke-width="0"
width="1em"
height="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.25001 4.99998H4.75001C4.33601 4.99998 4.00001 5.33598 4.00001 5.74998V14.25C4.00001 14.663 4.33601 15 4.75001 15H6.25001C6.66401 15 7.00001 14.663 7.00001 14.25V5.74998C7.00001 5.33598 6.66401 4.99998 6.25001 4.99998ZM6.00001 14H5.00001V5.99998H6.00001V14Z"
/>
<path
d="M10.25 4.99998H8.75001C8.33601 4.99998 8.00001 5.33598 8.00001 5.74998V12.25C8.00001 12.663 8.33601 13 8.75001 13H10.25C10.664 13 11 12.663 11 12.25V5.74998C11 5.33598 10.664 4.99998 10.25 4.99998ZM10 12H9.00001V5.99998H10V12Z"
/>
<path
d="M14.25 4.99998H12.75C12.336 4.99998 12 5.33598 12 5.74998V10.25C12 10.663 12.336 11 12.75 11H14.25C14.664 11 15 10.663 15 10.25V5.74998C15 5.33598 14.664 4.99998 14.25 4.99998ZM14 9.99998H13V5.99998H14V9.99998Z"
/>
<path
d="M2.70701 2.99998H14.5C14.776 2.99998 15 2.77598 15 2.49998C15 2.22398 14.776 1.99998 14.5 1.99998H2.70701L3.35301 1.35398C3.54801 1.15898 3.54801 0.841982 3.35301 0.646982C3.15801 0.451982 2.84101 0.451982 2.64601 0.646982L1.14601 2.14698C0.951006 2.34198 0.951006 2.65898 1.14601 2.85398L2.64601 4.35398C2.74401 4.45198 2.87201 4.49998 3.00001 4.49998C3.12801 4.49998 3.25601 4.45098 3.35401 4.35398C3.54901 4.15898 3.54901 3.84198 3.35401 3.64698L2.70701 2.99998Z"
/>
</svg>"Graph Left" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.