Skip to content
Cuelark UI

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

VS Code Icons · VscGitBranchStagedChanges

Git Branch Staged Changes icon

A free git branch staged changes 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.

Also known asgithub iconrepository iconcode iconopen source iconmerge iconcommit iconversion control icon
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/git-branch-staged-changes.json
components/icons/vscode-codicons-git-branch-staged-changes.tsx
import * as React from "react";

/**
 * Git Branch Staged Changes from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/git-branch-staged-changes. Sized in em, colored by currentColor.
 */
export function VscGitBranchStagedChangesIcon(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="M9.22 6.50098C9.084 6.19398 9 5.85798 9 5.49998C9 4.12098 10.121 2.99998 11.5 2.99998C12.879 2.99998 14 4.12098 14 5.49998C14 5.85798 13.917 6.19398 13.781 6.50198C13.479 6.36398 13.163 6.25298 12.835 6.17098C12.937 5.96798 13.001 5.74298 13.001 5.49998C13.001 4.67298 12.328 3.99998 11.501 3.99998C10.674 3.99998 10.001 4.67298 10.001 5.49998C10.001 5.74198 10.064 5.96798 10.167 6.17098C9.839 6.25298 9.523 6.36398 9.221 6.50198L9.22 6.50098ZM6.001 11.517C6.004 12.571 6.31 13.552 6.829 14.389C6.469 15.328 5.565 16 4.5 16C3.121 16 2 14.879 2 13.5C2 12.292 2.86 11.283 4 11.051V4.94998C2.86 4.71798 2 3.70798 2 2.50098C2 1.12198 3.121 0.000976562 4.5 0.000976562C5.879 0.000976562 7 1.12198 7 2.50098C7 3.70898 6.14 4.71798 5 4.94998V9.51298C5.419 9.19598 5.935 9.00098 6.5 9.00098H6.607C6.437 9.33298 6.301 9.68398 6.2 10.051C5.662 10.164 5.226 10.551 5.069 11.073C5.414 11.154 5.726 11.313 6 11.519L6.001 11.517ZM4.5 3.99998C5.327 3.99998 6 3.32698 6 2.49998C6 1.67298 5.327 0.999977 4.5 0.999977C3.673 0.999977 3 1.67298 3 2.49998C3 3.32698 3.673 3.99998 4.5 3.99998ZM6 13.5C6 12.673 5.327 12 4.5 12C3.673 12 3 12.673 3 13.5C3 14.327 3.673 15 4.5 15C5.327 15 6 14.327 6 13.5ZM16 11.5C16 13.985 13.985 16 11.5 16C9.015 16 7 13.985 7 11.5C7 9.01498 9.015 6.99998 11.5 6.99998C13.985 6.99998 16 9.01498 16 11.5ZM14.5 11.5C14.5 11.224 14.276 11 14 11H12V9C12 8.724 11.776 8.5 11.5 8.5C11.224 8.5 11 8.724 11 9V11H9C8.724 11 8.5 11.224 8.5 11.5C8.5 11.776 8.724 12 9 12H11V13.889C11 14.165 11.224 14.389 11.5 14.389C11.776 14.389 12 14.165 12 13.889V12H14C14.276 12 14.5 11.776 14.5 11.5Z"
      />
    </svg>
  );
}
With react-icons
import { VscGitBranchStagedChanges } from "react-icons/vsc";

export function Example() {
  return <VscGitBranchStagedChanges className="size-5" />;
}
git-branch-staged-changes.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="M9.22 6.50098C9.084 6.19398 9 5.85798 9 5.49998C9 4.12098 10.121 2.99998 11.5 2.99998C12.879 2.99998 14 4.12098 14 5.49998C14 5.85798 13.917 6.19398 13.781 6.50198C13.479 6.36398 13.163 6.25298 12.835 6.17098C12.937 5.96798 13.001 5.74298 13.001 5.49998C13.001 4.67298 12.328 3.99998 11.501 3.99998C10.674 3.99998 10.001 4.67298 10.001 5.49998C10.001 5.74198 10.064 5.96798 10.167 6.17098C9.839 6.25298 9.523 6.36398 9.221 6.50198L9.22 6.50098ZM6.001 11.517C6.004 12.571 6.31 13.552 6.829 14.389C6.469 15.328 5.565 16 4.5 16C3.121 16 2 14.879 2 13.5C2 12.292 2.86 11.283 4 11.051V4.94998C2.86 4.71798 2 3.70798 2 2.50098C2 1.12198 3.121 0.000976562 4.5 0.000976562C5.879 0.000976562 7 1.12198 7 2.50098C7 3.70898 6.14 4.71798 5 4.94998V9.51298C5.419 9.19598 5.935 9.00098 6.5 9.00098H6.607C6.437 9.33298 6.301 9.68398 6.2 10.051C5.662 10.164 5.226 10.551 5.069 11.073C5.414 11.154 5.726 11.313 6 11.519L6.001 11.517ZM4.5 3.99998C5.327 3.99998 6 3.32698 6 2.49998C6 1.67298 5.327 0.999977 4.5 0.999977C3.673 0.999977 3 1.67298 3 2.49998C3 3.32698 3.673 3.99998 4.5 3.99998ZM6 13.5C6 12.673 5.327 12 4.5 12C3.673 12 3 12.673 3 13.5C3 14.327 3.673 15 4.5 15C5.327 15 6 14.327 6 13.5ZM16 11.5C16 13.985 13.985 16 11.5 16C9.015 16 7 13.985 7 11.5C7 9.01498 9.015 6.99998 11.5 6.99998C13.985 6.99998 16 9.01498 16 11.5ZM14.5 11.5C14.5 11.224 14.276 11 14 11H12V9C12 8.724 11.776 8.5 11.5 8.5C11.224 8.5 11 8.724 11 9V11H9C8.724 11 8.5 11.224 8.5 11.5C8.5 11.776 8.724 12 9 12H11V13.889C11 14.165 11.224 14.389 11.5 14.389C11.776 14.389 12 14.165 12 13.889V12H14C14.276 12 14.5 11.776 14.5 11.5Z"
  />
</svg>
Attribution
"Git Branch Staged Changes" icon from VS Code Icons (https://github.com/microsoft/vscode-codicons), licensed under CC BY 4.0 license.

Related icons: github, repository, code, open source