The icon
The first SVG in your code. If there are several, you choose which one to export.
CSS, Design & IconsSVG, JSX & Tailwind to PNG
Icon Code to Image
Paste icon code from anywhere: SVG, JSX, Tailwind, CSS variables. Get PNGs, favicons and social cards.
Highlights
- Reads Tailwind classes and CSS variables
- PNG up to 8192 px
- Favicon pack and social card
- Code stays on your device
How to Turn Icon Code Into an Image
In a codebase, an icon is rarely a file you can download. It's an SVG inside a component, coloured by Tailwind classes, currentColor and CSS variables that only mean something inside your project. Paste that code here as it is, and the tool works out how it's meant to look: the background, the shape, the padding and each colour.
It runs in your browser, so your code is never uploaded. Pasted code is treated as untrusted: scripts, event handlers and links to other sites are removed before anything is drawn.
What you can paste
- Plain SVG from a file, a design tool or an icon library.
- JSX or TSX, a whole component included.
className,strokeWidthand prop spreads are converted. - Markup with Tailwind classes, including the element around the icon that gives it a background and a shape.
- CSS variables such as
var(--brand). Paste your theme as well and they fill in by themselves.
Start with Step 1 below. Paste your code, or try an example. In Step 2, set any colour the tool couldn't work out. In Step 3, adjust the shape and padding. In Step 4, download a PNG, an SVG, a favicon pack or a social card (50 downloads a day, free).
Step 1 of 4
Paste your icon code
SVG, JSX or markup with Tailwind classes. The tool finds the icon, its background and its colours.
Examples
This is sample code. Paste your own to replace it.
Theme tokens (optional)
Paste your CSS variables or your Tailwind theme, and every matching class or var() fills in by itself. 3 colours read from your theme.
Step 2 of 4
Check the colours
Every colour token in your code, and where its value came from. Set the ones the tool couldn't work out.
Paste icon code in Step 1 to see its colours here.
Step 3 of 4
Choose the shape
The background shape and the space around the icon. Both start from what your code says.
Preview
Paste icon code in Step 1 to see the preview here.
Step 4 of 4
Export
A PNG at any size, a standalone SVG, a full favicon pack or a social card.
From 16 to 8192 px. Sizes above 4096 px need a lot of memory and may fail on phones.
Free: 50 of 50 downloads left today · copying is unlimited
Your code is read and drawn on this device and never uploaded.
Icon code guide
From icon code to image files
What the tool reads in your code, where each colour comes from, and what the exported files are for.
The basics
What the tool reads
An icon in a project is more than its SVG. The element around it and the classes on it decide how it looks. The tool reads four things.
The wrapper
The nearest element around the icon that has a background. It gives the background colour, the shape and the size of the box.
currentColor
Icons often take their colour from the text colour around them. The tool looks for the nearest text colour class or color style.
Colour tokens
Named colours such as bg-ink or var(--brand). Each one is listed in Step 2 with where its value came from.
Why it runs on your device
The code is read and drawn in your browser. It's never uploaded, there's no account, and the files are made on your own device.
Worked example
One logo, read step by step
This is the first example in the tool: a logo written as markup with Tailwind classes, plus three colours from the project's theme.
<span class="grid size-8 place-items-center rounded-full bg-ink text-card">
<svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor">
…
<circle cx="12" cy="7" r="1.1" class="fill-brand-500 stroke-none"></circle>
</svg>
</span>The result at 512 px. The padding comes from the two sizes: a 20 px icon in a 32 px box leaves 6 px on each side, which is 18.8% of the box.
What the tool finds
- size-8 on the span
- A 32 px box
- rounded-full
- Circle
- bg-ink
- Background: token ink
- size-5 on the svg
- A 20 px icon, so 18.8% padding
- text-card + currentColor
- Line colour: token card
- fill-brand-500
- Dot: token brand-500
- stroke-none
- No outline on the dot
ink, card and brand-500 aren't Tailwind defaults, so without help they would need a value. The example's theme defines all three as CSS variables, and they resolve by themselves.
Colours
Where each colour comes from
For every colour token, the tool takes the first value it finds in this order. Step 2 shows which one it used.
| Order | Source | What it is |
|---|---|---|
| 1 | You | A colour you picked or typed in Step 2. It always wins. |
| 2 | Theme | CSS variables or a Tailwind colours object you pasted under Theme tokens. --color-ink and ink are the same token. |
| 3 | var() fallback | The second value in var(--brand, #0f766e), when the code gives one. |
| 4 | Tailwind default | Tailwind 4's own palette, for classes such as bg-indigo-600 or text-white. |
| 5 | Needs a value | Nothing defines it. The preview uses a placeholder until you set it. |
In the files you download, colours are written as plain hex codes with a separate opacity where needed, not as CSS variables or classes, so the files don't depend on your project's stylesheet.
Favicon pack
What each favicon file is for
The pack is one ZIP with ten files. Copy them to your site's root folder, then paste the lines from head-snippet.html into your page's head.
| File | Size | Used for |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Browser tabs and bookmarks, and anything that asks for /favicon.ico. |
| favicon.svg | Any | Browsers that accept an SVG icon. Stays sharp at every size. |
| favicon-16x16.png, favicon-32x32.png | 16, 32 px | PNG versions of the tab icon. |
| apple-touch-icon.png | 180 px | iPhone and iPad home screens. A full square with no transparency. |
| icon-192.png, icon-512.png | 192, 512 px | Android home screens and installed web apps. |
| icon-maskable-512.png | 512 px | Android's adaptive icons. A full square with extra space, so cropping to a circle doesn't cut the icon. |
| site.webmanifest | Lists the icons for installed web apps. Add your site's name to it. | |
| head-snippet.html | The link and meta tags to paste into your page's head. |
Good to know
What it reads, and what it can't
The tool reads code, it doesn't run it. Anything that only exists once your project is running has to be set by hand.
SVG, JSX and TSX
Plain SVG, or a whole React component. JSX attributes are converted to SVG ones.
Tailwind colour classes
Background, text, fill and stroke, with opacity modifiers, arbitrary values and CSS variables.
Sizes and corners
size, w, h and rounded classes, or width, height and border-radius in a style attribute.
Dark variants
dark: classes are left out by default. Turn on Use dark variant to export the dark version.
What it can't read
Your own CSS classes
A class like .icon-primary is defined in a stylesheet the tool never sees. Write the colour into the code, or use a CSS variable and set it in Step 2.
Values set by JavaScript
fill={color} or a class built at runtime has no value in the code itself, so the attribute is dropped. Set the colour in Step 2.
Gradient and image backgrounds
A wrapper with a gradient or a background image is skipped. The background shape takes one solid colour.
Common questions
Icon Code to Image FAQ
Quick answers about SVG and JSX, Tailwind colours, favicons, transparency, privacy and limits.
How do I convert SVG code to a PNG?
Paste the SVG code into Step 1, pick a size in Step 4 and choose Download PNG. You can export any size from 16 to 8192 pixels. Areas the icon doesn't cover stay transparent. If the SVG uses CSS variables or currentColor, the tool lists each colour in Step 2 so you can set it before you export.
How do I turn a React (JSX) icon into an image?
Paste the component as it is, including the function around it. The tool finds the markup, converts className to class and attributes like strokeWidth to stroke-width, and ignores prop spreads and other JavaScript expressions. Values that only exist at runtime, such as fill={color}, can't be read, so set those colours yourself in Step 2 or write them into the code.
Why does a colour say "needs a value"?
The code names a colour the tool can't look up, such as a custom Tailwind colour (bg-ink) or a CSS variable (var(--brand)) that's defined somewhere else in your project. Paste your CSS variables or your Tailwind theme under Theme tokens and they fill in by themselves, or pick the colour by hand. Until then the preview uses a placeholder.
Which Tailwind classes does it understand?
Colour classes for background, text, fill and stroke (bg-, text-, fill-, stroke-), with opacity modifiers like bg-black/50, arbitrary values like bg-[#123456] and fill-[var(--x)], and the Tailwind 4 shorthand bg-(--x). It also reads stroke widths (stroke-2), sizes (size-8, w-8, h-8) and rounded corners (rounded-full, rounded-2xl). Default colours such as indigo-600 come from the Tailwind 4 palette. Classes with a variant like hover: or md: are ignored, and dark: classes are used only when you turn on Use dark variant.
What's in the favicon pack?
A ZIP with ten files: favicon.ico (16, 32 and 48 px), favicon.svg, favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), icon-192.png, icon-512.png, icon-maskable-512.png, site.webmanifest and head-snippet.html. Put the files in your site's root folder and paste the lines from head-snippet.html into your page's head.
Why do the apple-touch and maskable icons look different from my icon?
Phones crop home-screen icons to their own shape, and iOS fills transparent areas with black. So those two files are always a full square in your icon's background colour (white if it has none), with extra space around the icon: at least 14% for the apple-touch icon and 24% for the maskable one. The other files keep the shape you chose.
Can I get a PNG with a transparent background?
Yes. Everything outside the background shape is transparent, so a circle or rounded square has transparent corners. Choose None in Step 3 to drop the background shape altogether and export only the icon.
What size is the social card?
1200 × 630 pixels, the size used for link previews (Open Graph images) on most social networks and chat apps. It shows your icon on a colour you choose, with an optional title next to it.
Is my code uploaded?
No. The code is read and drawn in your browser, on your device. The page doesn't send it anywhere, and it's gone when you close or refresh the tab.
Is it safe to paste code I copied from somewhere else?
Pasted code is treated as untrusted. Before anything is drawn, the tool removes script elements, event handlers such as onload, embedded pages, links to other sites and images loaded from other sites. The files you download contain only the drawing.
Is it free?
Yes, with no sign-up. You get 50 downloads a day across PNG, SVG, favicon pack and social card, and the count resets at midnight. Copy SVG code and Copy PNG don't count.
Related tools
More tools that run in your browser
Put your logo on price tags, turn Markdown into HTML, or give a photo a retro look. Nothing is uploaded in these either.
- TAGPrice Tag MakerMake printable price tags for shelves, hang tags and stickers, one at a time or in bulk, with optional sale prices and barcodes.
- HTMLMarkdown to HTMLTurn Markdown into clean, semantic HTML, as a snippet for your CMS or a complete web page, converted on your device.
- CAMDigicam FilterGive photos the early-2000s digital camera look: cool CCD colours, bright highlights and grain, at full size and without uploading them.