# Download icons from a website

> Download a website’s icons: interface SVGs, sprite icons, icon fonts, favicons and app icons. Save each as a file, find the icon set and check its license.

Canonical page: https://sitepeel.dev/guides/download-icons-from-website/

To download icons from a website, paste its link into a free asset extractor: the SVG tab lists the page’s interface icons as files, and the Icons tab lists its favicon and app icons. By hand, right-click an icon, choose Inspect and copy the svg element. Icon fonts need the icon set’s own SVGs.

Published: 2026-11-04

Tool used in this guide: [Image downloader extension](https://sitepeel.dev/image-downloader-chrome-extension/index.md)

Free website tool for this task: [Asset extractor](https://sitepeel.dev/free-tools/asset-extractor/index.md) (https://sitepeel.dev/free-tools/asset-extractor/)

## In short

- Most interface icons are inline SVG, with no file to right-click
- Favicons and app icons are separate files in several sizes
- Icon fonts are letters in a font: get the SVG from the icon set
- Many sites use free icon sets you can download from the source

## How to use it

1. **Paste the link** Paste the page’s link into the free asset extractor and press Extract.
2. **Open SVG or Icons** SVG has the page’s icons and logos. Icons has the favicon and app icons.
3. **Show hidden icons** Press Hidden only to see sprite icons and icons in closed menus.
4. **Download or copy** Download one icon, copy its SVG code, or press ZIP for all of them.

## Four kinds of website icons

How websites show icons, and how to save each

| Kind | How to spot it | How to save it |
| --- | --- | --- |
| Inline SVG | An `<svg>` element in Elements | Copy outerHTML, or use the SVG tab |
| SVG sprite | `<use href="#icon-name">` inside the svg | The asset extractor lists each sprite icon as a file |
| Icon font | An `<i>` or `<span>` with a class like `fa-` and a `::before` glyph | Get the SVG from the icon set’s site |
| Favicon and app icons | `<link rel="icon">` and the web app manifest | The Icons tab, or the favicon downloader |
| PNG icons | An `<img>` or CSS background with a small PNG | Save it, or look for a larger size in srcset |

## Find out which icon set a site uses

Many sites use a free icon set. Download the icons from the set itself: you get clean SVGs and a clear license.

- Class names often say it: `lucide-`, `fa-`, `bi-` or `material-symbols`.
- Lucide and Heroicons outline icons are drawn on a 24 by 24 grid with `stroke="currentColor"`.
- Font Awesome, Bootstrap Icons and Material Symbols all offer SVG downloads.

Good to know: Licenses differ: Lucide is ISC, Heroicons MIT, and Font Awesome Free mixes CC BY 4.0, SIL OFL and MIT. Pro icons need a paid license.

## Copy an icon by hand

- Right-click the icon and choose Inspect.
- Select the `<svg>` element, right-click it and choose Copy > Copy outerHTML.
- Paste it into a file named icon.svg and add `xmlns="http://www.w3.org/2000/svg"` if it is missing.
- Swap `currentColor` for a real color, or the icon turns black.
- Paste the SVG straight into Figma to edit it as a vector.

- [More on saving SVGs from a website](https://sitepeel.dev/guides/download-svg-from-website/index.md)

## Get favicons and app icons

The favicon downloader reads the page’s icon links, its web app manifest and /favicon.ico. You get ICO, SVG and PNG favicons, Apple touch icons and app icons up to 512 pixels. Press Largest to put the biggest first.

- [Favicon downloader: every icon size, free](https://sitepeel.dev/free-tools/favicon-downloader/index.md)

## Questions and answers

### How do I download icons from a website?

Paste the link into a free asset extractor and open the SVG tab for interface icons or the Icons tab for favicons. Or right-click an icon, choose Inspect and copy the svg element into a .svg file.

### How do I download an icon font icon as SVG?

A font glyph doesn’t save cleanly as a file. Find the icon set from the class name, like fa- for Font Awesome, and download that icon’s SVG from the set’s site.

### Why is my downloaded icon black?

It used currentColor or the page’s CSS for its color. Open the SVG and set fill or stroke to a real color.

### How do I get a website’s favicon?

Paste the link into a free favicon downloader. It reads the page’s icon links, its manifest and /favicon.ico, and lists every icon and size.

### Can I use icons from another website?

Icons from free sets like Lucide or Heroicons can be used under their licenses; get them from the set. Custom icons and logos belong to the site’s owner, so ask first.

## Further reading

- [Lucide license](https://lucide.dev/license)
- [Font Awesome Free license](https://fontawesome.com/license/free)
- [Heroicons](https://heroicons.com/)

## Related pages

- [Download SVGs from a website](https://sitepeel.dev/guides/download-svg-from-website/index.md): Save inline SVGs, sprite icons, SVG files and CSS background SVGs from any website, step by step, with Chrome DevTools or a free online asset extractor.
- [Download a logo from a website](https://sitepeel.dev/guides/download-logo-from-website/index.md): Download a company’s logo from its website as SVG or PNG: find the brand page, copy the header SVG, get large app icons, and know when you may use it.
- [Extract website images](https://sitepeel.dev/guides/extract-images-from-website/index.md): Download a website’s images, SVGs and videos, choose the right size and see why some files won’t download. Online or with Sitepeel for Chrome.
- [Download fonts from a website](https://sitepeel.dev/guides/download-fonts-from-website/index.md): Find and save the WOFF2, WOFF and TTF font files a website loads, convert WOFF2 to TTF for desktop apps, and check the license before you use them.