AI assistant / SVG + React

Claude logo & icon

Download the Claude logo as SVG or use it in React. Preview light, dark and grayscale assets for AI tool directories, integration cards and documentation.

Claude · light

Download Claude SVG ↓

import StackIcon from "tech-stack-icons";

<StackIcon name="claude" variant="light" className="h-12 w-12" />

SVG is standalone. React requires the npm package.

npm install tech-stack-icons

The light and dark assets currently use the same orange mark. The preview surface changes; grayscale uses a separate neutral asset.

A recognizable mark for your AI tool stack

Use this Claude mark when identifying the assistant in a tool comparison, workflow diagram or integration list. An Anthropic company logo is a different asset. Pair the icon with a visible Claude label so readers can identify the tool without relying on the symbol alone.

For an AI workflow diagram, place Claude beside your editor, data source and deployment platform. Keep all marks inside equal-size containers rather than stretching their paths.

From browser to canvas

Use your icons where you work

Insert technology icons into your design or workshop without managing a folder of logo files.

Open the Figma plugin ↗Open the Miro app ↗

How to use the Claude icon

Choose a theme and download the SVG for your website, README or presentation.
For React, install tech-stack-icons and copy the component snippet. The variant prop selects the same theme shown here.
Keep the original proportions, include a clear label and check the result on your actual background.

The package code is MIT licensed. Brand names and logos belong to their respective owners; a library license does not grant trademark rights. Check the official Claude website for brand guidance.

More icons for your stack

Need another tool? Search the complete icon library or follow the GitHub README guide.