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

VS Code Icons · VscClaude

Claude icon

A free claude 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/claude.json

components/icons/vscode-codicons-claude.tsx

import * as React from "react";

/**
 * Claude from VS Code Icons (https://github.com/microsoft/vscode-codicons), CC BY 4.0.
 * Via Cuelark UI: ui.cuelark.com/icons/vscode-codicons/claude. Sized in em, colored by currentColor.
 */
export function VscClaudeIcon(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="M7.09001 14.3L7.29001 13.43L7.51001 12.31L7.69001 11.41L7.86001 10.3L7.96001 9.93998V9.90998L7.88001 9.91998L7.04001 11.07L5.77001 12.79L4.76001 13.85L4.52001 13.95L4.10001 13.74L4.14001 13.35L4.38001 13.01L5.77001 11.23L6.61001 10.12L7.16001 9.48998V9.40998H7.12001L3.42001 11.82L2.76001 11.9L2.47001 11.63L2.51001 11.2L2.65001 11.06L3.76001 10.29L6.52001 8.74998L6.56001 8.60998L6.52001 8.53998H6.38001L5.92001 8.50998L4.35001 8.46998L2.99001 8.40998L1.66001 8.33998L1.32001 8.26998L1.01001 7.84998L1.04001 7.63998L1.32001 7.45998L1.73001 7.48998L2.61001 7.55998L3.94001 7.63998L4.91001 7.69998L6.34001 7.84998H6.56001L6.59001 7.74998L6.52001 7.68998L6.46001 7.62998L5.07001 6.70998L3.59001 5.72998L2.81001 5.15998L2.39001 4.86998L2.18001 4.59998L2.10001 4.00998L2.48001 3.58998L3.00001 3.62998L3.13001 3.65998L3.65001 4.06998L4.76001 4.91998L6.22001 5.99998L6.43001 6.16998L6.53001 6.10998V6.06998L6.43001 5.91998L5.65001 4.48998L4.81001 3.02998L4.43001 2.42998L4.33001 2.06998C4.29001 1.93998 4.27001 1.79998 4.27001 1.64998L4.70001 1.05998L4.94001 0.97998L5.53001 1.05998L5.77001 1.26998L6.13001 2.09998L6.70001 3.39998L7.61001 5.15998L7.88001 5.68998L8.02001 6.16998L8.08001 6.31998H8.18001V6.23998L8.25001 5.22998L8.39001 4.00998L8.53001 2.43998L8.57001 1.98998L8.79001 1.45998L9.22001 1.17998L9.56001 1.32998L9.84001 1.73998L9.80001 1.98998L9.65001 3.06998L9.31001 4.75998L9.10001 5.90998H9.23001L9.37001 5.75998L9.94001 4.99998L10.91 3.79998L11.33 3.31998L11.83 2.78998L12.15 2.53998H12.75L13.18 3.19998L12.98 3.88998L12.36 4.66998L11.84 5.32998L11.1 6.31998L10.65 7.11998L10.69 7.17998H10.79L12.46 6.81998L13.37 6.66998L14.43 6.48998L14.92 6.70998L14.98 6.92998L14.78 7.40998L13.63 7.68998L12.29 7.95998L10.29 8.43998H10.26L10.29 8.49998L11.19 8.57998L11.58 8.60998H12.53L14.29 8.73998L14.75 9.04998L15.02 9.40998L14.98 9.69998L14.27 10.05L13.32 9.82998L11.08 9.29998L10.32 9.11998H10.21V9.17998L10.85 9.80998L12.01 10.86L13.48 12.22L13.55 12.56L13.37 12.84L13.17 12.81L11.88 11.83L11.38 11.4L10.26 10.46H10.19V10.56L10.44 10.94L11.81 13L11.88 13.63L11.78 13.83L11.42 13.96L11.04 13.89L10.23 12.77L9.40001 11.5L8.73001 10.37L8.66001 10.43L8.25001 14.66L8.07001 14.87L7.65001 15.04L7.30001 14.77L7.10001 14.34L7.09001 14.3Z"
      />
    </svg>
  );
}

With react-icons

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

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

claude.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="M7.09001 14.3L7.29001 13.43L7.51001 12.31L7.69001 11.41L7.86001 10.3L7.96001 9.93998V9.90998L7.88001 9.91998L7.04001 11.07L5.77001 12.79L4.76001 13.85L4.52001 13.95L4.10001 13.74L4.14001 13.35L4.38001 13.01L5.77001 11.23L6.61001 10.12L7.16001 9.48998V9.40998H7.12001L3.42001 11.82L2.76001 11.9L2.47001 11.63L2.51001 11.2L2.65001 11.06L3.76001 10.29L6.52001 8.74998L6.56001 8.60998L6.52001 8.53998H6.38001L5.92001 8.50998L4.35001 8.46998L2.99001 8.40998L1.66001 8.33998L1.32001 8.26998L1.01001 7.84998L1.04001 7.63998L1.32001 7.45998L1.73001 7.48998L2.61001 7.55998L3.94001 7.63998L4.91001 7.69998L6.34001 7.84998H6.56001L6.59001 7.74998L6.52001 7.68998L6.46001 7.62998L5.07001 6.70998L3.59001 5.72998L2.81001 5.15998L2.39001 4.86998L2.18001 4.59998L2.10001 4.00998L2.48001 3.58998L3.00001 3.62998L3.13001 3.65998L3.65001 4.06998L4.76001 4.91998L6.22001 5.99998L6.43001 6.16998L6.53001 6.10998V6.06998L6.43001 5.91998L5.65001 4.48998L4.81001 3.02998L4.43001 2.42998L4.33001 2.06998C4.29001 1.93998 4.27001 1.79998 4.27001 1.64998L4.70001 1.05998L4.94001 0.97998L5.53001 1.05998L5.77001 1.26998L6.13001 2.09998L6.70001 3.39998L7.61001 5.15998L7.88001 5.68998L8.02001 6.16998L8.08001 6.31998H8.18001V6.23998L8.25001 5.22998L8.39001 4.00998L8.53001 2.43998L8.57001 1.98998L8.79001 1.45998L9.22001 1.17998L9.56001 1.32998L9.84001 1.73998L9.80001 1.98998L9.65001 3.06998L9.31001 4.75998L9.10001 5.90998H9.23001L9.37001 5.75998L9.94001 4.99998L10.91 3.79998L11.33 3.31998L11.83 2.78998L12.15 2.53998H12.75L13.18 3.19998L12.98 3.88998L12.36 4.66998L11.84 5.32998L11.1 6.31998L10.65 7.11998L10.69 7.17998H10.79L12.46 6.81998L13.37 6.66998L14.43 6.48998L14.92 6.70998L14.98 6.92998L14.78 7.40998L13.63 7.68998L12.29 7.95998L10.29 8.43998H10.26L10.29 8.49998L11.19 8.57998L11.58 8.60998H12.53L14.29 8.73998L14.75 9.04998L15.02 9.40998L14.98 9.69998L14.27 10.05L13.32 9.82998L11.08 9.29998L10.32 9.11998H10.21V9.17998L10.85 9.80998L12.01 10.86L13.48 12.22L13.55 12.56L13.37 12.84L13.17 12.81L11.88 11.83L11.38 11.4L10.26 10.46H10.19V10.56L10.44 10.94L11.81 13L11.88 13.63L11.78 13.83L11.42 13.96L11.04 13.89L10.23 12.77L9.40001 11.5L8.73001 10.37L8.66001 10.43L8.25001 14.66L8.07001 14.87L7.65001 15.04L7.30001 14.77L7.10001 14.34L7.09001 14.3Z"
  />
</svg>

Attribution

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

Claude icon in other sets

Similar VS Code Icons icons