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

VS Code Icons · VscDiffSingle

Diff Single icon

A free diff single 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

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/vscode-codicons/diff-single.json

components/icons/vscode-codicons-diff-single.tsx

import * as React from "react";

/**
 * Diff Single from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/diff-single. Sized in em, colored by currentColor.
 */
export function VscDiffSingleIcon(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="M12.561 4.35398L9.647 1.43998C9.368 1.16098 8.981 1.00098 8.586 1.00098H4C2.897 1.00098 2 1.89798 2 3.00098V13.001C2 14.104 2.897 15.001 4 15.001H11C12.103 15.001 13 14.104 13 13.001V5.41498C13 5.01998 12.84 4.63398 12.561 4.35398ZM12 13C12 13.552 11.552 14 11 14H4C3.448 14 3 13.552 3 13V2.99998C3 2.44798 3.448 1.99998 4 1.99998H8.586C8.718 1.99998 8.847 2.05398 8.94 2.14598L11.854 5.05998C11.947 5.15298 12 5.28198 12 5.41398V13ZM10 6.49998C10 6.77598 9.776 6.99998 9.5 6.99998H8V8.49998C8 8.77598 7.776 8.99998 7.5 8.99998C7.224 8.99998 7 8.77598 7 8.49998V6.99998H5.5C5.224 6.99998 5 6.77598 5 6.49998C5 6.22398 5.224 5.99998 5.5 5.99998H7V4.49998C7 4.22398 7.224 3.99998 7.5 3.99998C7.776 3.99998 8 4.22398 8 4.49998V5.99998H9.5C9.776 5.99998 10 6.22398 10 6.49998ZM10 11.5C10 11.776 9.776 12 9.5 12H5.5C5.224 12 5 11.776 5 11.5C5 11.224 5.224 11 5.5 11H9.5C9.776 11 10 11.224 10 11.5Z"
      />
    </svg>
  );
}

With react-icons

import { VscDiffSingle } from "react-icons/vsc";

export function Example() {
  return <VscDiffSingle className="size-5" />;
}

diff-single.svg

<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="M12.561 4.35398L9.647 1.43998C9.368 1.16098 8.981 1.00098 8.586 1.00098H4C2.897 1.00098 2 1.89798 2 3.00098V13.001C2 14.104 2.897 15.001 4 15.001H11C12.103 15.001 13 14.104 13 13.001V5.41498C13 5.01998 12.84 4.63398 12.561 4.35398ZM12 13C12 13.552 11.552 14 11 14H4C3.448 14 3 13.552 3 13V2.99998C3 2.44798 3.448 1.99998 4 1.99998H8.586C8.718 1.99998 8.847 2.05398 8.94 2.14598L11.854 5.05998C11.947 5.15298 12 5.28198 12 5.41398V13ZM10 6.49998C10 6.77598 9.776 6.99998 9.5 6.99998H8V8.49998C8 8.77598 7.776 8.99998 7.5 8.99998C7.224 8.99998 7 8.77598 7 8.49998V6.99998H5.5C5.224 6.99998 5 6.77598 5 6.49998C5 6.22398 5.224 5.99998 5.5 5.99998H7V4.49998C7 4.22398 7.224 3.99998 7.5 3.99998C7.776 3.99998 8 4.22398 8 4.49998V5.99998H9.5C9.776 5.99998 10 6.22398 10 6.49998ZM10 11.5C10 11.776 9.776 12 9.5 12H5.5C5.224 12 5 11.776 5 11.5C5 11.224 5.224 11 5.5 11H9.5C9.776 11 10 11.224 10 11.5Z"
  />
</svg>

Attribution

"Diff Single" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons:

Similar VS Code Icons icons