a plain-English guide
How to add icons to your website (no coding needed)
Whether your site runs on WordPress, Wix, Squarespace, Webflow, Framer or Shopify, adding icons takes a few clicks. The only real question is whether to use a PNG or an SVG, and that depends on your platform.
- The universal method: download the icon as a PNG with a see-through background and upload it with your site builder’s Image block. It works everywhere.
- Sharper option: use SVG where your platform accepts it. Wix, Webflow and Framer take SVG files; WordPress blocks SVG uploads by default.
- Squarespace and Shopify image uploads do not list SVG, so use a PNG, or paste the SVG code into a code block.
- Plain HTML: paste the SVG code straight into your page. It stays sharp and takes your text colour.
- with icons has free PNG and SVG downloads on every icon page, and npm packages and a CDN for developers.
On this page 11 sections
Adding icons to a website is easier than it looks, and you do not need to write code. Download the icon, upload it with your site builder’s Image block, resize it, done. The one thing worth knowing: some platforms accept SVG files (sharp at any size, recolourable) and some only take PNG (a normal picture). This guide tells you which is which.
We will use with icons for the examples. Every icon page has Copy image, PNG download (choose the size and colour), SVG download and Copy SVG code buttons, and the icons are MIT licensed, so you can use them on any site without adding a credit. The steps work the same with any icon set that offers PNG and SVG files.
PNG or SVG: which file should you use?
Here is the plain-English version. A PNG is a picture made of tiny squares (pixels). Every website builder accepts it, and with a see-through background it sits neatly on any colour. Its weakness: stretch it bigger than it was saved and it goes blurry.
An SVG is a picture described as shapes, a bit like a recipe for drawing it. That makes it tiny, razor sharp at any size, and on some platforms you can change its colour after uploading. Its weakness: not every platform accepts SVG uploads, because SVG files can contain code. We go deeper in SVG vs PNG icons.
| Platform | SVG file upload? | Best choice | Our guide |
|---|---|---|---|
| WordPress | Blocked by default | PNG, or SVG code in a Custom HTML block | WordPress guide |
| Wix | Yes | SVG (recolourable) | Wix guide |
| Squarespace | Not in image uploads | PNG, 256 px | Squarespace guide |
| Webflow | Yes | SVG, or SVG code in a Code Embed | Webflow guide |
| Framer | Yes, paste or drag | Copy SVG and paste | Framer guide |
| Shopify | Not listed for theme images | PNG | (see below) |
| Plain HTML | Yes | SVG code pasted into the page | HTML guide |
How do you add icons to WordPress?
WordPress has one quirk to know about: it does not allow SVG uploads out of the box. Its default list of allowed file types includes PNG, JPEG, GIF and WebP, but not SVG, because an SVG file can hide code. If you try, you will see “Sorry, you are not allowed to upload this file type.” Two easy ways around it:
- 1Easiest: upload a PNG
Download the icon as a PNG (128 px is a good size), add an Image block in the editor, and upload it. Set the width in the block settings.
- 2Sharpest: paste the SVG code
Click Copy SVG on the icon page, add a Custom HTML block, and paste. The icon stays sharp and you can change its size in the code.
A heads-up on the second method: WordPress only lets trusted roles (like administrators on your own site) save raw code, and some hosted plans strip it out. If the icon disappears after saving, use the PNG. There are also plugins that allow SVG uploads safely, but you do not need one for a handful of icons. The full walkthrough is in our WordPress guide.
How do you add icons to Wix?
Wix is SVG-friendly. In the editor, click Media on the left, then Upload Media, choose your SVG file and add it to the page. Wix treats it as “vector art”, so it stays sharp at any size.
Even better, Wix can recolour simple vector art: select the icon, click the Design icon, and change the fill colour. That works best with single-colour icons such as the line and solid styles. Wix says it sorts uploads by their colours, and if it cannot classify an SVG, the colour options will not appear. In that case, just download the icon again in the colour you want. See our Wix and Squarespace guide.
How do you add icons to Squarespace?
Squarespace’s help centre lists only JPG, GIF, PNG and WebP for images, so SVG files will not upload to an Image block. Use a PNG with a see-through background instead:
- 1Download a 256 px PNG
Pick your colour on the icon page first. Squarespace cannot recolour images.
- 2Add an Image block
Edit the page, click Add Block (or an insert point), choose Image, and upload the PNG.
- 3Resize and align it
Drag the block to size. Keep every icon in a section the same width.
If you really want SVG, Squarespace’s Code block can hold pasted SVG code (what you can use in code blocks depends on your plan). For a handful of icons, the PNG route is simpler and looks great.
How do you add icons to Webflow and Framer?
Webflow
Webflow accepts SVG files in its Assets panel. Upload the SVG, drag it onto the page and it becomes an Image element. The smarter trick: drag a Code Embed element onto the page and paste the SVG code. Then the icon takes the text colour of its parent, so hover colours just work. Details in our Webflow guide.
Framer
Framer is the easiest of all. Click Copy SVG on the icon page, click on your Framer canvas and paste (Ctrl+V, or ⌘+V on a Mac). The icon arrives as a graphic you can resize and recolour. You can also drag an .svg file straight onto the canvas. See the Framer guide.
What about Shopify and other store builders?
Shopify’s help centre lists JPEG, PNG, GIF, HEIC and WebP as the supported formats for theme images, so a PNG is the safe choice for image settings in the theme editor. Upload it where the section asks for an image, or add it under Content, then Files.
Many Shopify themes also include a Custom Liquid or custom HTML section, where pasted SVG code works like it does on a plain HTML page. Other store and site builders follow the same pattern: if there is an Image block, a PNG will work; if there is a code or embed block, SVG code usually will too.
How do you add icons to a plain HTML website?
If you (or someone on your team) edit the HTML of your site directly, you have the best option of all: paste the icon’s SVG code right into the page. There is no file to upload, the icon stays perfectly sharp, and it automatically takes the colour of the text around it. Do not worry if code is new to you; this is copy and paste.
<a href="/contact">
<svg width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">…</svg>
Contact us
</a>Click Copy SVG on the icon page to get the full code (the “…” above is where the drawing goes). To change the size, edit the width and height numbers. To change the colour, change the text colour of the link or paragraph it sits in.
Prefer a normal image file? That works too:
<img src="images/mail.png" width="24" height="24" alt="Email">The alt text describes the icon for people using screen readers. If the icon sits next to words that already say the same thing, use alt="" so it is skipped. Our guide to accessible icons explains why.
What size and colour should website icons be?
A few simple rules keep icons looking tidy on any platform:
- 16 to 24 px for icons in menus, buttons, lists and footers.
- 32 to 48 px for feature icons above a short headline.
- One colour for all icons, usually your brand’s accent colour or the text colour.
- One style per site. with icons draws each icon once in 20 matching styles, so line icons in the menu and gloss or glass icons in the hero still look like one family.
Pick one style for your site and use it everywhere: line, solid or duo for menus and buttons, and a creative style such as gloss, glass or retro for big feature icons at 32 px and up.
Common problems and quick fixes
| Problem | Why it happens | Fix |
|---|---|---|
| “File type not allowed” | The platform blocks SVG uploads | Upload a PNG, or paste the SVG code into a code block |
| Icon looks blurry | A small PNG was stretched | Download a PNG two or three times bigger, or use SVG |
| White box around the icon | The image has a solid background | Use a PNG with a see-through background |
| Can’t change the colour | PNGs are fixed pictures | Download it again in the new colour, or use SVG |
| Pasted icon is huge | The SVG code has no size set | Set width and height (for example 24) in the code |
Pick one icon style and one colour for the whole site, size icons by role (small in menus, larger in features), and pair them with clear words.
Upload a tiny PNG and stretch it, mix icons from three different sites, or use icons with no text where visitors have to guess what they mean.
The bottom line
Every website builder can show icons. Use a PNG with a see-through background when in doubt, use SVG where your platform accepts it (Wix, Webflow, Framer, plain HTML), and paste SVG code into a code block when you want the sharpest result. Then keep sizes and colours consistent. When you are ready to design the page itself, read how to use icons on a landing page.
Frequently asked questions
Why does WordPress say “Sorry, you are not allowed to upload this file type” for my SVG?
WordPress does not include SVG in its default list of allowed upload types, because an SVG file can contain code. Upload a PNG instead, or paste the SVG code into a Custom HTML block. Plugins exist that allow SVG uploads safely, but they are optional.
Should I use PNG or SVG icons on my website?
SVG is the better choice when your platform supports it: it is tiny, sharp at every size and can change colour. PNG is the safe fallback that works everywhere. Download PNGs at about two to three times the size you will show them, so they stay crisp on sharp screens.
What size should website icons be?
Small icons in menus, buttons and lists usually sit at 16 to 24 px. Feature icons in a grid look good at 32 to 48 px. If you use PNG, download it at about double those sizes.
Can I change the colour of an icon after uploading it?
With SVG, often yes: Wix lets you recolour single-colour vector art, and pasted SVG code follows your text colour. With PNG, no: download it again in the new colour. It takes a few seconds on the icon page.
Are free icons OK to use on a business website?
If the license allows commercial use, yes. with icons is MIT licensed, so you can use the icons on any website without adding a credit. Some free icon sites ask for a visible credit or link.
Sources and notes
- WordPress developer reference: wp_get_mime_types() (default allowed file types)
- Wix Help Center: About vector art (uploading and recolouring SVG)
- Squarespace Help Center: Formatting images for display on the web (supported file types)
- Webflow Help Center: Assets panel
- Framer Help: How to add icons in Framer
- Shopify Help Center: Uploading images (image formats)
Facts about other icon sets were checked against their official sites in October 2026. Libraries change, so check the links above for the latest numbers.