Extract SVG icons, fonts
and colors from any site.

How to extract icons, fonts and colors from a website

Six steps from a URL to files your project can use — and what to do when the first attempt comes back empty.

1. 1

   Paste the URL of the page carrying the assets

   Extraction works on one page at a time, not a whole domain, so point it at the page that actually shows what you want. Icons usually live on a marketing page or a component gallery rather than the homepage, and a page that renders a large icon set inline is the one worth scanning.

2. 2

   Let it read the stylesheets, not just the HTML

   Every stylesheet the page links is fetched too, and any @import inside those is followed three levels deep. That matters because most of a site's color palette and its background images live in CSS rather than in the markup — scanning HTML alone typically returns a fraction of what is there.

3. 3

   Work through the tabs rather than the first screen

   Results are split by kind: images and inline SVGs, the color palette, font families, any Lottie references, and captured component markup. The icon set is almost always in the images tab as inline SVGs, which are the assets worth having — they scale, they recolor, and they are the ones a right-click cannot save.

4. 4

   Recolor an icon before you export it

   Any extracted SVG can have its hardcoded fills and strokes swapped for one of your own hex values, with white, none and transparent left alone so cut-outs survive. The preview updates as you type. You can also copy the result out as a React component with the attributes already renamed to camelCase.

5. 5

   Take the format your codebase wants

   The ZIP holds the SVG files. The tailwind.config snippet gives you the extracted palette as a color scale you can paste into a theme. The Design Tokens JSON imports into Figma through the Tokens Studio plugin. The PDF is a one-page brand summary — palette, type stack, icons — for a client or a deck.

6. 6

   If the page came back nearly empty, use the bookmarklet

   An empty result almost always means the page builds itself in the browser, so the HTML the server sends is a shell. Drag the Deep Harvest button to your bookmarks bar, open the target page, and click it: it reads the page after it has rendered, in your own session, and hands the assets back to this tool.

What the extractor reads, and what it cannot

The page and every stylesheet it links, with @import chains followed 3 levels deep. Anything a script adds after load is outside that, which is the difference between a full result and an empty one.

Caps are read from the extractor itself. They exist because a large site can reference thousands of assets, and a list that long is slower to work through than the page you took it from.

What actually gets readHTML + linked CSS, @import depth 3

The served HTML, every stylesheet it links, and any stylesheet those import, three levels down. From that: image sources including srcset and the common lazy-loading attributes, background images referenced in CSS, inline SVG elements, font-family declarations, @font-face names, hex and rgb values, and CSS custom properties whose value is a color. What it does not read is anything a script adds after the page loads — that is the single biggest determinant of whether a scan comes back full or empty.

Inline SVGs are the assets worth having

An icon written directly into the markup as an <svg> element cannot be saved by right-clicking, which is why people end up looking for a tool at all. Those are captured as complete documents and are what fills the ZIP. Linked files — a .svg, .png or .webp with a URL — are listed with their source so you can take them from the origin. Very large inline SVGs are skipped on purpose, because at that size the element is usually a background illustration or a chart rather than an icon.

Fonts come back as names, not filesfamily names only

What is extracted is the typeface a page asks for — the font-family declarations and @font-face names — so you learn that a site sets Inter for body text and something else for headings. The font files themselves are not downloaded, and that is deliberate as much as technical: a commercial webfont licence covers the site serving it and not you. Knowing the name is what you need to license it properly or find a metric-compatible substitute.

The palette is everything in the CSS, not a curated brand set

Colors are pulled from hex codes, rgb values and CSS custom properties across the whole stylesheet, then deduplicated, with pure black and pure white dropped and the list capped. On a real site that includes borders, shadows, disabled states and whatever a component library shipped, so expect to prune. The custom properties are the ones to look at first: a site that defines its palette as variables has effectively labelled its own brand colors for you.

Component capture is a reference, not a drop-in

Navs, headers, heroes, cards, footers and similar regions are matched by role and class, and their markup is captured together with the CSS rules that match their class names directly. That last part is the limit worth knowing: rules that target a component through a descendant selector, a media query or a resolved custom property will not come along. Treat the output as a structural reference you rebuild from, not as something to paste into a project.

Lottie results are candidates

Animation entries come from Lottie player elements and from JSON URLs referenced in the page that look animation-related. Nothing is fetched to confirm it is really a Lottie file, so the list is a set of leads rather than verified assets. Open one before you build anything on it.

Where the URL route stops and the bookmarklet starts

Pasting a URL reads what the server sends. That covers most content sites and almost no single-page applications, and it stops at anything requiring a session or sitting behind bot protection. The bookmarklet runs inside a tab you already have open, so it reads the rendered page, with your cookies, using computed styles rather than parsed CSS — which is why it is the answer for a dashboard, a staging environment, or any app that renders client-side. It cannot run on sites with a strict content security policy, which is why it fails on the large social platforms.

Extraction is not a licence

Being able to take a file says nothing about being allowed to use it. Logos and wordmarks are trademarks whatever format you get them in; photography and illustration are usually licensed to that site alone; icon sets carried by a site often come from a library with its own attribution terms; and webfonts are licensed per site. The uses this is genuinely for are studying how something is built, rebuilding your own brand assets from your own site, auditing a client's existing palette and typography, and finding out which icon library a site uses so you can install it yourself.