a plain-English guide
How many icons does a website need? A practical answer
Fewer than you think, and they matter more as a family than as a pile. Here are honest ranges by site type, the 30 icons almost everyone uses, and a checklist to count your own.
- Most websites need 10 to 40 different icons. A small business site or blog gets by with 10 to 25, an online shop with 30 to 60, and a SaaS app or dashboard with roughly 60 to 150. These are rules of thumb, not research.
- About 30 core icons cover almost every site: menu, close, search, home, arrows, mail, phone, map pin, user, check, alerts, plus, download and share.
- A consistent set matters more than a big one. Thirty icons that share one grid, line weight and style look better than three hundred from different places.
- Add text labels to almost every icon. Nielsen Norman Group found that only a handful of icons (home, print, search) are close to universally understood.
- Get them all from one library so they match. with icons has 500 free icons, each in 20 styles, which covers most websites with room to spare.
On this page 8 sections
Most websites need between 10 and 40 different icons. A small business site or a blog usually needs 10 to 25, an online shop 30 to 60, and a software app or dashboard somewhere around 60 to 150. The exact number matters far less than this: every icon you use should come from one consistent set and carry one clear meaning.
Those ranges are rules of thumb, worked out by listing the jobs icons do on each kind of site, not survey data. Below you will find them in a table, the 30 or so icons almost every site uses, a checklist to count your own, and advice on when an icon needs a word next to it.
How many icons do different kinds of websites need?
Here is a practical starting point. Count different icons (the cart icon used ten times still counts as one), and remember that your own number depends on how many actions and ideas your pages have.
| Type of site | Different icons (rule of thumb) | What they are for |
|---|---|---|
| Landing page | 6 to 15 | Menu, a few feature icons, arrows on buttons, contact details |
| Small business or portfolio | 10 to 25 | Navigation, services, phone, mail, map pin, opening hours, reviews |
| Blog or content site | 10 to 20 | Search, menu, share, bookmark, reading time, tags, RSS, arrows |
| Online shop | 30 to 60 | Cart, wishlist, account, filters, sort, ratings, delivery, returns, payment, sale tags |
| SaaS web app | 60 to 150 | Navigation, actions (edit, copy, delete, share), statuses, file types, settings, notifications |
| Dashboard or admin panel | 40 to 100 | Charts, trends up and down, filters, dates, users, data, export |
- 10 to 25
- a small business site
- 30 to 60
- an online shop
- 60 to 150
- a SaaS app
- 500
- icons in with icons
Notice the pattern: the more things people can do on a site, the more icons it needs. A brochure site mostly shows information, so a few icons go a long way. An app is full of buttons, and each repeated action (edit, delete, download) earns its own small picture.
Why does a consistent set matter more than a big one?
People notice when icons do not match, even if they cannot say why. One icon has thin lines and the next thick ones; one has rounded corners and the next sharp; one is filled and the next is an outline. The page starts to look patched together.
A small set that shares the same grid, line weight, corner style and level of detail looks deliberate, like it was made for your brand. That is why a library of 30 matching icons beats a pile of 3,000 that came from five different places. We go deeper in our guide to keeping icons consistent.
Pick one library and one main style (for example line), and use solid only for active or selected states.
Grab each icon from wherever a quick search lands you. Mixed line weights and corner shapes make a page look unfinished.
Consistency also means one meaning per icon. If a star means “favourite” on one page, do not use it for “rating” on another, and do not use two different icons for the same action. Our guide on choosing the right icon covers picking icons people recognise.
What are the icons almost every website uses?
Across all kinds of sites, roughly 30 icons do most of the work. If you are starting a new site, these are worth having from day one. Here they are, grouped by job.
Getting around
Getting in touch
Doing things
Feedback and accounts
That is 32 icons. An online shop adds a few of its own, like cart, delivery, payment, price tag and filter. A dashboard adds charts, trends and data.
How do you work out exactly how many icons you need?
You do not need a designer for this. Grab a notebook or a spreadsheet and walk through your site page by page.
- 1List every page or screen
Home, about, services, contact, product pages, account, checkout. For an app, every main screen.
- 2Write down every action and status
Each button, each “saved” or “error” message, each piece of contact info. These are the places an icon might help.
- 3Cross out the ones words do better
If an idea takes more than a few seconds to picture, a text label alone is clearer. Skip the icon.
- 4Merge duplicates
One idea, one icon. “Remove”, “delete” and “bin” all become the same trash icon.
- 5Count what is left, then add a little room
That is your number. Leave space to grow, and make sure your library has more than you need today.
A quick audit checklist for an existing site:
- Does each icon mean one thing, everywhere it appears?
- Do all icons share the same line weight and style?
- Are there two or more icons for the same idea?
- Do icons in navigation and buttons have a visible text label?
- Are your sizes limited to two or three (for example 20, 24 and 48 px)?
- Is any icon only there to fill space?
When should icons have text labels?
Almost always. In its well-known article on icon usability, Nielsen Norman Group found that only a few icons are close to universally recognised: home, print and the magnifying glass for search. Most others mean different things on different sites. Even the three-line “hamburger” menu icon is still not understood by everyone.
| Icon | Safe without a label? | Why |
|---|---|---|
| search | Usually | The magnifying glass is one of the few near-universal icons |
| home | Usually | Widely recognised as “go to the start” |
| printer | Usually | Widely recognised, though rarely needed on websites now |
| menu | Often | Familiar to many, but not all; “Menu” next to it helps |
| heart | Depends | Could mean like, favourite, wishlist or health |
| star | Rating, favourite or featured? Needs a word | |
| layers | Abstract ideas almost always need a label |
Nielsen Norman Group also warns against labels that only appear on hover: they cost an extra step and do not work on touch screens. Their handy test: if it takes you more than five seconds to think of an icon for something, an icon probably cannot explain it well.
Labels also help navigation bars on phones. Google’s Material Design says a navigation bar should have three to five destinations, each with an icon and a text label. When an icon does stand alone (an icon-only button), give it a hidden text name for screen readers; our guide to accessible icons shows how.
Does using fewer icons look better?
Usually, yes. Icons are visual punctuation: they help people scan and find things faster. Put one next to every line of text and nothing stands out any more. A good habit is to save icons for places people scan (navigation, toolbars, feature lists, contact details) and let headings and paragraphs speak for themselves.
Fewer sizes help too. Most sites look tidy with two or three: 20 or 24 px for the interface and 48 px for features. Our icon sizes guide explains the numbers.
How do you get every icon you need from one library?
Start with a library that covers your core 30 plus the extras for your type of site, in a style you like, with a licence that allows commercial use. Then use only that library, so everything matches without effort. Our guide to the best free icon libraries compares the popular options honestly.
with icons is built for exactly this. There are 500 everyday icons, each drawn once on the same 24 by 24 grid and rendered in 20 styles: 10,000 SVGs that always match. Use line for your interface, solid for active states and duo for a soft touch of colour, then a creative style like gloss for your homepage or slides. Everything is free under the MIT licence, including commercial use.
- Search in your own words. Type “bin” and you get trash, and “gear” finds settings. Try it in the icon library.
- No code needed. Every icon page lets you copy the image, download an SVG or a PNG in your colour and size, or copy the SVG code.
- Works with your site builder. Step-by-step guides for WordPress, Webflow, Framer, Wix and Squarespace and plain HTML.
- For developers: React, Vue, Svelte, Angular and SolidJS components, a web component and CSS classes, installed from npm (
@withicons/reactand friends) or loaded from the jsDelivr CDN.
If your app has hundreds of specialist features, a bigger catalogue such as Material Symbols or Font Awesome may cover more niche ideas, though usually in fewer matching styles. For most websites, 500 is plenty. See how to add icons to a website for the next step.
Frequently asked questions
How many icons should a website have?
Most websites use 10 to 40 different icons. A simple business site or blog needs about 10 to 25, an online shop about 30 to 60, and a web app or dashboard roughly 60 to 150. These are rules of thumb: count the actions and ideas on your own pages to get your real number.
How many icons is too many?
It is too many when icons stop helping people scan and start competing with your words, or when the same idea gets two different icons. A useful test: if you need more than a few seconds to think of an icon for something, a text label alone is probably clearer.
Should every menu item have an icon?
No. Icons help in tab bars, toolbars and long settings lists where people scan. In a short text menu on a website, words alone are often cleaner. Where you do use icons in navigation, keep a visible text label next to each one.
Can I mix icons from different libraries?
You can, but it usually shows: line weights, corner shapes and sizes rarely match. It is better to pick one library that covers your needs and draw or request the few missing icons in the same style.
How many icons should go in a mobile navigation bar?
Three to five. Google’s Material Design says navigation bars are for three to five destinations, each shown with an icon and a text label. With more than five, use a menu or a side navigation instead.
Is 500 icons enough for a website?
For most websites, yes: even a busy online shop rarely needs more than 60 different icons. Very large apps with many specialist features may want a bigger catalogue, such as Material Symbols or Font Awesome, though bigger libraries usually come in fewer matching styles.
Sources and notes
- Nielsen Norman Group: Icon Usability (Aurora Harley)
- Material Design 3: Navigation bar guidelines (3 to 5 destinations)
- W3C: Understanding SC 1.1.1 Non-text Content
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.