EN

Tips・Level up your design

Free icon asset sites

Just one icon in a menu or button makes a page much easier to understand. Here are free icon asset sites, sorted by type, with screenshots. How to use them as SVG is covered too.

Just adding one icon next to your text makes buttons and menus much easier to understand. Here I introduce free icon asset sites sorted by what you want to do, with screenshots.

TipsFree photo and illustration stock sitesLooking for photo and illustration asset sites? Here.

Type 1: Reliable all-around icon collections

These are go-to sites with a huge variety, covering almost any genre.

Font Awesome

A worldwide standard in web development. Tens of thousands of icons across every genre, from arrows to social media to tools.

The Font Awesome screen. Below the search box, simple line and filled icons are packed together in rows
The free tier alone has several thousand icons, enough for most purposes.

Font Awesome

Material Symbols

A set of consistent, simple icons provided by Google.

The Material Symbols screen. Rounded, simple icons are laid out in a grid, with a slider to change their weight
You can fine-tune line weight and whether they’re filled. The design is clean and easy to work with.

Material Symbols

Type 2: Stylish, design-focused ones

When you want a unified look, icon sets with a single design concept are a good fit.

Solar Icons

A modern-feeling set characterized by smooth curves.

The Solar Icons screen. Rounded, modern line icons are arranged by style: line, filled, bold, and so on
It comes in several styles like “line only” and “bold.” We use this series for Piyogramming’s own icons too.

Solar Icons

Phosphor Icons

A flexible set where you can pick from six line weights.

The Phosphor Icons screen. The same icon appears from thin line to thick fill, with a way to switch the weight
Thin, thick, filled, and more: you can change the weight of the same icon to match your page’s mood.

Phosphor Icons

Feather Icons

An icon set drawn with lines only, as simple as it gets.

The Feather Icons screen. Minimal icons drawn with thin lines only are laid out in tiles
Since they’re plain line drawings with no decoration, they blend into any design. The count is limited, but the standard shapes are all there.

Feather Icons

Type 3: Search across many at once

When you want to search across several icon sets at once, a search site is handy.

Iconify

Search across 200+ icon sets and 300,000+ icons, including the ones above.

The Iconify screen. Below the search box, logos and icon samples from various icon sets are lined up in a long list
Search for ” icon” and you can compare similar shapes from several icon sets. Once you know the name, you can download it right here too.

Iconify

A note when you use them: check the license

Even when they’re free, how far you’re allowed to use them (the license) is decided per site. Keep just these two in a corner of your mind.

Where to lookWhat to check
Commercial OK?Can you use it on a shop or work page too? (If you’re just practicing, no need to worry too much.)
Credit attributionSome sites say “please write the author’s name.”

Free doesn’t mean they’re all the same—whether credit attribution is required differs from one icon set to another. For the ones in this article, here’s how it stands.

Icon setLicenseCredit attribution
Font Awesome FreeCC BY 4.0Required (fine as long as you don’t remove the attribution comment inside the distributed files)
Material SymbolsApache 2.0Not required (appreciated if you add it)
Solar IconsCC BY 4.0Required
Phosphor IconsMITNot required
Feather IconsMITNot required

For practice use, there’s no need to worry too much, but when you use them on a shop or work page, take a peek at that icon set’s “license” page once.

How to use icons: embedding them as SVG

On many icon asset sites you can download or copy icons in a format called SVG. SVG is an image format you can paste straight into HTML just like text, so you can place it on the page without an <img>.

<button>
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path d="…" />
  </svg>
  Save
</button>

Copy the contents from the site’s “Copy SVG” or “Download SVG” button and paste it straight into your HTML to display it. When you want to change the color, adjust it with the SVG’s fill attribute or the CSS color property.

When you want the icon’s color to change automatically to match the text color, setting fill="currentColor" on the SVG is handy. This way, the icon’s color follows the color of the text around it.

button {
  color: #3a3a3a;
}
<button>
  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
    <path d="…" />
  </svg>
  Save
</button>

Written this way, just changing the button’s text color changes the icon’s color along with it, so you don’t have to write the CSS twice.

Summary

  1. Choose an icon asset site by what you want to do: all-around / design-focused / search-across-many
  2. If you can’t decide, start with Font Awesome or Material Symbols
  3. Check the license before using, and paste it in as SVG

Just having one icon makes the meaning of a button or menu much easier to grasp at a glance.

FAQ

SVG or icon font, which should I actually use?
If you can't decide, SVG is the safer choice. You paste in only the icons you need, so it loads light, and you can change the color part by part, not just a single color. Icon fonts let you handle lots of icons easily, but they tend to load even the icons you never use.
The icon color isn't showing up where I expect
For SVG colors, you can either write a `fill` attribute on the SVG tag itself, or set CSS `color` on a parent element and use `fill="currentColor"`. Note that an SVG loaded as an image with an `<img>` tag can't have its inner color changed via CSS.
The icon looks blurry
Using a PNG icon larger than its actual size is a common cause of blur. SVG doesn't blur even when enlarged, so choose the SVG format whenever you can.

Popular tips