Claude Code Logo SVG & PNG — Free Download
Download the Claude Code logo as a scalable SVG or a PNG and WebP in five sizes. Pick the icon color and a transparent, white or black background on each card — the Claude and Anthropic icons are right beside it.
Files are generated in your browser. These are icon marks, not full wordmarks or animated logos.
More tools
Edit, Recolor or Compress Your Logo
Need the Claude Code logo SVG in a different color or a smaller file? Recolor, compress or convert it with these free SVG tools.
Which icon
Claude Code, Claude or Anthropic: Which Icon Fits?
The three names are related, but the marks are not interchangeable. Pick the one that matches what your page or project is actually about.
Claude Code logo
Use the Claude Code icon when you refer to the coding tool itself — a README badge, a terminal setup guide, an integration list or a developer tools page.
Claude icon
The starburst stands for the Claude assistant and its model family. It suits chat integrations, model comparison tables and AI feature lists.
Anthropic icon
The Anthropic mark represents the company. Choose it for partner pages, research citations or anywhere you name the organization rather than a product.
File formats
Claude Code Logo SVG, PNG or WebP?
Each format suits a different destination. Download the one your app accepts — renaming a file extension does not convert it.
SVG — scalable vector
The Claude Code logo SVG keeps its vector paths, so it stays sharp from a 16 px favicon to a poster. Best for websites, design apps and documentation that renders SVG.
PNG — universal raster
A Claude Code logo PNG works almost everywhere, including slide decks, word processors and chat apps. With no background selected, it keeps full transparency.
WebP — lighter for the web
WebP also supports transparency and is usually smaller than PNG at the same size, which makes it a good choice when a website or CMS accepts it.
How it works
How to Download the Claude Code Logo
Every option lives on the icon card, so getting the right Claude Code logo file takes three clicks.
- 1
Pick the icon
Find the Claude Code, Claude or Anthropic card. Each card has its own settings, so changing one never affects the others.
- 2
Set color and background
Choose original, white or black for the icon, then no background, white or black. The preview updates instantly.
- 3
Download the format
Press SVG for a scalable vector, or choose a pixel size and press PNG or WebP. You can also copy the SVG code directly.
Backgrounds and sizes
Transparent, White or Black — Your Choice
The icon color and the background are separate controls, and both apply to SVG, PNG and WebP downloads alike.
Transparent Claude Code logo
Choose no background to get the Claude Code logo without a background rectangle, so the page or slide shows through around the shape.
White icon for dark designs
Set the icon to white for dark mode pages, dark slides or video overlays. The preview switches to a dark surface so you can see it.
Solid white or black tile
Add a white or black background when a platform needs an opaque square, such as an app tile, an avatar slot or a social preview.
Five pixel sizes
PNG and WebP export at 64, 128, 256, 512 or 1024 px square. Use 64–128 for interface icons and 512–1024 for slides and high-density screens.
Vector stays vector
The size buttons only affect raster files. The SVG download keeps its 24 by 24 viewBox and scales to any size without a new export.
Preview equals download
The preview is drawn from the same file you download. The checkerboard behind a transparent icon is only for display and is not saved.
Where to use it
Using the Claude Code Icon in Your Projects
Common places the Claude Code icon ends up, and the file that works best for each.
README and docs
Inline the SVG in Markdown or MDX docs so the Claude Code icon stays crisp on retina screens and in both light and dark themes.
Slides and reports
Insert a 512 px PNG with no background into Keynote, PowerPoint or Google Slides when the deck mentions Claude Code.
Websites and integrations
List Claude Code on an integrations or tooling page with the SVG, or a WebP when your CMS only accepts raster images.
Design files
Paste the copied SVG code into Figma or another vector app to get editable paths instead of a flattened picture.
Dark mode interfaces
Download the white version for dark toolbars and menus, and check contrast on the real background before shipping.
Custom colors
Need a brand color other than original, white or black? Open the SVG in the color changer below and pick any hex value.
FAQ
Claude Code Logo FAQ
Answers about the Claude Code icon: SVG and PNG downloads, transparent backgrounds, the white version, the wordmark and custom colors.
Yes — press the SVG button on the Claude Code card to save the logo as a vector file. It keeps its paths and a 24 by 24 viewBox, so it scales cleanly to any size. Choose the icon color and background first; the SVG uses the same settings as the preview.
Select None under Background, pick a size from 64 to 1024 pixels, then press PNG. The file is created in your browser with full transparency around the icon. WebP works the same way if your destination accepts that format and you want a smaller file.
Yes — choose White under Icon color on the Claude Code card. Combine it with no background for dark pages and slides, or with a black background for an opaque tile. The preview switches to a dark surface so the white icon stays visible while you choose.
No — each download is the icon mark on its own, without the product name set in type and without animation. If your layout needs the name beside the icon, add the text in your own design so it matches your typography, size and spacing.
The Claude icon is the starburst used for the assistant and its models, while the Claude Code icon refers specifically to the coding tool. They share a terracotta color but are different shapes, so pick the one that matches the product your page is about.
The cards offer the original color, white and black. For any other color, download the SVG and open it in the SVG color changer, which lists the fill color and lets you replace it with any hex value before downloading the recolored file.
Create your own SVG icon
Describe the icon you need and the SVG maker turns it into a clean, editable vector in seconds.
Try the SVG Maker