a plain-English guide
How to use icons on a landing page (without making it look cheap)
Icons can make a landing page feel clear and polished, or cluttered and clip-arty. The difference is a handful of simple habits. Here they are, with real examples in different styles.
- Use icons to help people scan, not to decorate. Every icon should sit next to words that explain it.
- The pattern that works: icon + short headline + one line of text, in a grid of three, four or six.
- Keep one style, one size and one colour per section. Mixed sets are the fastest way to look cheap.
- Use calm line or duo icons for most sections. Save creative styles (like gloss, glass, sticker or retro) for the hero or one feature row, at 32 px or larger.
- Hide decorative icons from screen readers, label icon-only buttons, and give meaningful icons at least 3:1 contrast.
On this page 10 sections
The secret to icons on a landing page is that they should help people scan, never just decorate. Pair every icon with a short headline and one line of text, use one style, one size and one colour per section, and save the flashy styles for one special spot. Do that and your page looks considered instead of cheap.
Below we show the patterns that work, the mistakes that make a page look like a template from 2012, and when it is worth reaching for a bolder style. All the examples use with icons, our free MIT set, so you can copy any of them straight onto your page.
Why do icons make some landing pages look cheap?
It is rarely the icons themselves. It is how they are used. The usual culprits:
- Mixed icon sets. One icon is thin and rounded, the next is chunky and square. Visitors feel the mismatch even if they cannot name it.
- Icons as decoration. A lightbulb next to “Our ideas” and a rocket next to everything else. If the icon does not add meaning, it adds noise.
- Rainbow colours. Every icon in a different colour, competing with your buttons for attention.
- Random sizes. Icons that are 40 px in one section and 22 px in the next, for no reason.
- Guess-what-this-means icons. As the usability experts at the Nielsen Norman Group point out, only a few icons (home, print and the magnifying glass for search) are close to universally understood. Most need a text label.
The good news: every one of these is easy to fix.
The pattern that always works: icon, headline, one line
Look at almost any well-designed product page and you will find the same building block: a small icon, a short bold headline (two to five words), and one sentence that explains the benefit. Repeat it three, four or six times in a grid and you have a feature section.
- 1Write the words first
List your three to six main benefits as short headlines. If you cannot say it in five words, simplify the feature, not the icon.
- 2Pick one icon per benefit
Choose the most obvious match. shield-check for security, zap for speed, users for teams. Obvious beats clever.
- 3Use one style and size
Same style, same size, same colour for every icon in the grid.
- 4Align everything
Icons sit on the same line, headlines start at the same point, and the gaps are equal.
How many icons should a landing page have?
Fewer than you think. Most strong landing pages use icons in two or three places: the feature grid, a short “how it works” row, and small icons inside buttons or checklists. That is it.
The test is simple: if you removed the icon, would anything be harder to understand or find? If not, remove it. Icons are like spices: a little makes the dish, too much ruins it.
Line or something bolder? Choosing an icon style
Most of a landing page should feel calm, so simple Line style or Duo style icons are the safe default. But a page also needs one moment with a bit of personality, usually the hero section or the main feature row. That is where a creative style can shine.
Line, solid and duo are the three everyday styles, for most sections. The other 17 are creative styles, like gloss, glass, sticker, retro and luxe, for big, special moments. Here is what the most useful ones feel like:
| Style | It feels | Use it on a landing page for |
|---|---|---|
| Line | Clean, light, modern | Feature grids, lists, navigation, most sections |
| Solid | Bold, confident | Small sizes, dark backgrounds, checklists |
| Duo | Friendly, soft | Feature grids for apps and SaaS, pricing cards |
| Gloss | Premium, shiny, 3D-ish | Hero section, product launch, one feature row |
| Engrave | Crafted, classic | Finance, legal, heritage and luxury brands |
| Blueprint | Technical, precise | Developer tools, engineering, “how it works” |
| Sketch | Playful, human | Education, creative tools, community pages |
| Glass | Modern, airy, techy | AI and SaaS heroes, app launches |
| Sticker | Fun, bold, candy-coloured | Events, community pages, kids and creator brands |
| Retro | Warm, nostalgic, 70s | Cafés, food, music and lifestyle brands |
| Luxe | Rich, jewel-like, 3D | Premium plans, luxury, gifts and finance heroes |
Because every with icons style comes from the same drawing, you can use line icons in the navigation and gloss icons in the hero and they still feel like one family. With most icon sets you would have to mix sources to get that contrast.
The newer creative styles bring colour of their own. Glass style looks like frosted glass with colour glowing through, Sticker style looks like die-cut vinyl stickers, and Retro style has chunky outlines and sunset stripes, like a vintage patch. Each icon also has 20 to 30 hand-picked colour palettes, so you can match these styles to your brand colours.
Keep size and colour consistent
Consistency is the cheapest way to look expensive. Decide on a few rules and stick to them across the whole page:
- One size per role. For example: 40 px for feature icons, 20 px inside buttons and lists.
- One colour. Use your brand’s accent colour, or plain dark grey. Avoid giving each icon its own colour.
- One style per section. Ideally one style for the whole page, plus at most one special section in a creative style. Our guide on keeping icons consistent goes deeper.
Don’t decorate: icons should carry meaning
The fastest way to make a page feel cheap is to sprinkle icons where words would do. A good icon either helps people find something (like a section or a button) or helps them understand it faster. If it does neither, it is decoration.
Pair each icon with a clear headline. Use a small set of obvious icons, one style, one size, one accent colour. Leave white space around them.
Put an icon on every heading, use a different colour for each, mix three icon sets, or rely on an icon alone to explain a feature.
Accessibility basics for landing page icons
A few small habits make your icons work for everyone, including people using screen readers and people with low vision. Our full guide to accessible icons has more, but these cover most landing pages:
Hide decorative icons from screen readers
If an icon sits next to text that already says the same thing (like a feature headline), a screen reader does not need to announce it. Mark it as decorative so it is skipped. In code that is one attribute:
<svg aria-hidden="true" ...>...</svg>
<h3>Secure by default</h3>Label icons that stand alone
An icon-only button (a menu icon, a close button, a social link) needs a text label that screen readers can read, such as aria-label="Open menu". Most site builders have a field for this, often called “alt text” or “accessible name”.
Give meaningful icons enough contrast
The WCAG accessibility guidelines ask that graphics people need to understand the content have a contrast ratio of at least 3:1 against the background. Pale grey icons on white often fail. The same guidance notes that very thin lines can render fainter than their colour suggests, which is one more reason to use solid icons on busy or coloured backgrounds.
| Situation | What to do | Needed? |
|---|---|---|
| Icon next to a headline that says the same thing | Hide it from screen readers | Yes |
| Icon-only button or link | Add a text label | Yes |
| Meaningful icon on a coloured background | Check 3:1 contrast | Yes |
| Purely decorative background pattern | Hide it, no label | Nice to have |
| Icon that is the only way to understand a feature | Add words instead | Avoid this |
A quick checklist before you publish
- Every icon sits next to words that explain it.
- All icons in a section share one style, one size and one colour.
- A creative style appears in one section at most, at 32 px or larger.
- Icons line up with each other and with their headlines.
- Decorative icons are hidden from screen readers; icon-only buttons have labels.
- The icons are under a license that allows commercial use. Not sure? Read our plain-English license guide.
The bottom line
Icons do not make a landing page look premium on their own. Restraint does: a small set of obvious icons, one style, one size, one colour, each paired with a clear headline. Add one bolder moment if your brand calls for it, and make sure everyone can use the page. Want to see what each style is good for? Read icon styles explained, or start adding icons to your site with our guide on how to add icons to a website.
Frequently asked questions
How many icons should a landing page have?
There is no fixed number, but most good landing pages use icons in only two or three places: a feature grid, maybe a short “how it works” row, and small icons in buttons or lists. If every heading has an icon, none of them stand out.
Should landing page icons be outline or filled?
Outline (line) icons feel light and modern and suit most sections. Filled (solid) icons feel bolder and read better at small sizes or on busy backgrounds. Pick one for the page and stick to it, or use a matching family where both share the same drawing.
What size should feature icons be?
Feature icons usually look right between 32 and 48 px on desktop, a bit larger than the headline next to them. Small inline icons in buttons and lists sit at 16 to 24 px. Use one size per role across the page.
Do icons improve conversion rates?
We are not aware of reliable evidence that icons by themselves lift conversions. What they do well is make a page faster to scan, which helps people find the reason to act. Clear words matter more than the icons.
Can I use free icons on a commercial landing page?
Yes, if the license allows commercial use. with icons is MIT, so you can use it on any landing page without adding a credit. Some free marketplaces require a visible credit or link on the page.
Sources and notes
- Nielsen Norman Group: Icon Usability
- W3C: Understanding WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast
- W3C: Understanding WCAG 2.2 Success Criterion 1.1.1 Non-text Content
- with icons license (MIT)
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.