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

VS Code Icons · VscDiffMultiple

Diff Multiple icon

A free diff multiple 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-multiple.json

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

import * as React from "react";

/**
 * Diff Multiple from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/diff-multiple. Sized in em, colored by currentColor.
 */
export function VscDiffMultipleIcon(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="M13 12V4.414C13 4.014 12.844 3.637 12.561 3.353L9.64602 0.439C9.36302 0.156 8.98602 0 8.58502 0H3.99902C2.89602 0 1.99902 0.897 1.99902 2V12C1.99902 13.103 2.89602 14 3.99902 14H10.999C12.102 14 12.999 13.103 12.999 12H13ZM3.00002 12V2C3.00002 1.449 3.44902 1 4.00002 1H8.58602C8.71702 1 8.84602 1.053 8.94002 1.146L11.854 4.06C11.947 4.153 12 4.282 12 4.414V12C12 12.551 11.551 13 11 13H4.00002C3.44902 13 3.00002 12.551 3.00002 12ZM15 6.41V12C15 14.21 13.21 16 11 16H6.00002C5.26002 16 4.62002 15.6 4.27002 15H11C12.65 15 14 13.65 14 12V4.79L14.56 5.35C14.84 5.64 15 6.01 15 6.41ZM10 5.499C10 5.775 9.77602 5.999 9.50002 5.999H8.00002V7.499C8.00002 7.775 7.77602 7.999 7.50002 7.999C7.22402 7.999 7.00002 7.775 7.00002 7.499V5.999H5.50002C5.22402 5.999 5.00002 5.775 5.00002 5.499C5.00002 5.223 5.22402 4.999 5.50002 4.999H7.00002V3.499C7.00002 3.223 7.22402 2.999 7.50002 2.999C7.77602 2.999 8.00002 3.223 8.00002 3.499V4.999H9.50002C9.77602 4.999 10 5.223 10 5.499ZM10 10.499C10 10.775 9.77602 10.999 9.50002 10.999H5.50002C5.22402 10.999 5.00002 10.775 5.00002 10.499C5.00002 10.223 5.22402 9.999 5.50002 9.999H9.50002C9.77602 9.999 10 10.223 10 10.499Z"
      />
    </svg>
  );
}

With react-icons

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

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

diff-multiple.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="M13 12V4.414C13 4.014 12.844 3.637 12.561 3.353L9.64602 0.439C9.36302 0.156 8.98602 0 8.58502 0H3.99902C2.89602 0 1.99902 0.897 1.99902 2V12C1.99902 13.103 2.89602 14 3.99902 14H10.999C12.102 14 12.999 13.103 12.999 12H13ZM3.00002 12V2C3.00002 1.449 3.44902 1 4.00002 1H8.58602C8.71702 1 8.84602 1.053 8.94002 1.146L11.854 4.06C11.947 4.153 12 4.282 12 4.414V12C12 12.551 11.551 13 11 13H4.00002C3.44902 13 3.00002 12.551 3.00002 12ZM15 6.41V12C15 14.21 13.21 16 11 16H6.00002C5.26002 16 4.62002 15.6 4.27002 15H11C12.65 15 14 13.65 14 12V4.79L14.56 5.35C14.84 5.64 15 6.01 15 6.41ZM10 5.499C10 5.775 9.77602 5.999 9.50002 5.999H8.00002V7.499C8.00002 7.775 7.77602 7.999 7.50002 7.999C7.22402 7.999 7.00002 7.775 7.00002 7.499V5.999H5.50002C5.22402 5.999 5.00002 5.775 5.00002 5.499C5.00002 5.223 5.22402 4.999 5.50002 4.999H7.00002V3.499C7.00002 3.223 7.22402 2.999 7.50002 2.999C7.77602 2.999 8.00002 3.223 8.00002 3.499V4.999H9.50002C9.77602 4.999 10 5.223 10 5.499ZM10 10.499C10 10.775 9.77602 10.999 9.50002 10.999H5.50002C5.22402 10.999 5.00002 10.775 5.00002 10.499C5.00002 10.223 5.22402 9.999 5.50002 9.999H9.50002C9.77602 9.999 10 10.223 10 10.499Z"
  />
</svg>

Attribution

"Diff Multiple" 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