What size should icons be? A simple guide for web, apps and slides

On this page 11 sections

For most websites and apps, icons should be 24 pixels. Go down to 16 or 20 px for small text and busy tables, and up to 32, 48 px or more for feature sections, empty states and slides. Whatever size you choose, make the button around the icon at least 24 px, and ideally 44 px or more on touch screens.

That covers most decisions. This guide shows what each size looks like, why stroke thickness matters at small sizes, how to match icons to text, and what to do for slides and print.

16px

20px

24px

32px

48px

What is the standard icon size?

24 by 24 pixels. It is the size most icon sets are designed at, and the one most apps use for menus, toolbars and buttons. Google’s Material Design names 24 dp as its standard icon size, and sets like Lucide, Tabler, Heroicons and with icons are drawn on a 24 by 24 grid.

Why 24? It is big enough to hold a clear drawing, small enough to sit next to text, and it divides neatly: half is 12, double is 48. Designers draw icons on that grid so lines land on whole pixels and look crisp.

(A quick note on units: “px” on the web, “pt” on Apple devices and “dp” on Android all mean roughly the same thing: a size that looks the same on any screen, no matter how many tiny real pixels it has.)

24 px

the everyday default

16 px

the smallest you should go

32 px+

for creative styles

44 px

a comfortable tap target

Which icon size should you use where?

A simple icon size cheat sheet (our recommendations)

Size	Use it for	Pairs with text of	Good styles
16 px	Inline icons in small text, dense tables, tiny badges	12 to 14 px	Solid, line
20 px	Compact buttons, sidebars, form fields, list items	14 to 16 px	Line, solid, duo
24 px	Navigation, toolbars, standard buttons, mobile tab bars	16 to 18 px	Line, solid, duo
32 px	Feature lists, cards, settings categories	18 to 24 px headings	Any style
48 px+	Feature grids, empty states, hero sections, slides	Large headings	Any, creative styles shine

Most products only need two or three of these sizes. A common, tidy set is 20 or 24 px for the interface and 48 px for feature sections. More sizes than that usually looks accidental.

Why does line thickness matter at small sizes?

An icon file stores its drawing on a 24 by 24 grid. When you show it at a different size, everything scales, including the line. Our line style uses a 1.75 px line at 24 px. Here is what happens to it at other sizes:

The line style’s stroke at different display sizes

Shown at	Line becomes	How it looks
16 px	about 1.2 px	Light, can look faint
20 px	about 1.5 px	Clear
24 px	1.75 px	As designed
32 px	about 2.3 px	Clear
48 px	3.5 px	Bold, can look heavy

At 16 px, the line is barely more than one real pixel, so line icons can look pale or fuzzy. At 48 px and beyond, the line gets chunky. You have three easy options:

• Switch to solid at small sizes. Filled shapes hold up much better at 16 px.
• Adjust the line. In the SVG code you can change the stroke-width value. Our code components (on npm) have a strokeWidth setting, plus absoluteStrokeWidth, which keeps the line the same thickness at any size.
• Use icons drawn for small sizes. Some sets do this: Heroicons, for example, ships separate solid sets drawn for 20 px and 16 px, and Google’s Material Symbols adjusts its line weight automatically between 20 and 48 dp.

16px

20px

24px

16px

20px

24px

How do you match icon size to text size?

Icons should look like they belong to the words beside them. A good starting point is an icon about 1.25 to 1.5 times your font size. In practice:

• 14 px text (small labels, tables): a 16 to 20 px icon.
• 16 to 18 px text (normal body text and buttons): a 20 to 24 px icon.
• 24 px and bigger headings: a 32 px icon or larger.

Then line them up. The icon’s middle should sit level with the middle of the text, not with its bottom. Leave a small gap between icon and word, about a third to a half of the icon’s width.

How big should icons be on phones and touch screens?

On touch screens, there are two sizes to think about: the size of the icon and the size of the tap target (the area that responds when you touch it). The icon can stay at 24 px. The target needs to be bigger.

• WCAG 2.2 (criterion 2.5.8, level AA): at least 24 by 24 CSS pixels, or enough space around smaller targets.
• WCAG 2.2 (criterion 2.5.5, level AAA): the stricter goal of 44 by 44 CSS pixels.
• Apple: a default control size of 44 by 44 points on iPhone and iPad (with 28 by 28 as the minimum).
• Google, Android: touch targets of at least 48 by 48 dp.

Use padding around the icon to make the button bigger, rather than making the icon itself huge. For more on this, read our friendly guide to accessible icons.

What size should icons be in slides and documents?

Slides are seen from far away, so icons need to be much bigger than on a website. There are no official numbers here, but these starting points work well on a standard 16:9 slide:

• Next to bullet points: about the height of the bullet text, or a little bigger.
• Above short headings in a feature row: roughly two to three times the heading height.
• A single “hero” icon on a title slide: as big as you like. This is where creative styles shine.

rockettargetuserschart-line

Which file should you use?

Use an SVG wherever the app accepts it (PowerPoint, Word, Canva, Figma and newer versions of Keynote): it stays sharp at any size. Where it does not, like Google Slides and Google Docs, use a PNG and follow the “twice as big” rule: download at least twice the size you will show it. On with icons icon pages you can pick 256 px for normal slide and doc icons, or 1024 px for big slides and print. Our SVG vs PNG guide explains why.

Why download icons at twice the size?

Modern screens are sharp. Phones and many laptops pack two or three real pixels into every point you see, which is why Apple asks app makers to supply images at 2x and 3x. A PNG made at exactly the display size can look slightly soft on these screens, and very soft on a projector when the slide is stretched.

Print needs even more. Printers usually ask for around 300 pixels per inch, so a 1024 px PNG covers about 3.4 inches (8.7 cm) at full print quality. For anything bigger, like a poster or a banner, use the SVG.

Which icon style works best at each size?

Every style works at large sizes, but only some survive small ones. Line, solid and duo are made for interfaces, from 16 px up. The 17 creative styles (gloss, engrave, glass, luxe, retro, kawaii and the rest) have fine details like highlights, hatching and shadows, so use them at 32 px or larger. Pixel is a special case: its pixel art is hand-tuned to look crisp at 16, 32 and 48 px. Watch what happens to engrave below 32 px:

16px

24px

32px

48px

64px

See all 20 styles side by side in icon styles explained.

How do you choose your icon sizes in four steps?

1. 1
   Start at 24 px

   Use 24 px for navigation, toolbars and buttons. It is the standard for a reason.

2. 2
   Pick one small and one large size

   Usually 16 or 20 px for dense areas, and 48 px for features and empty states.

3. 3
   Wrap buttons in big targets

   Make every icon button at least 24 by 24 px, and 44 px or more on touch screens, with padding.

4. 4
   Export big for slides

   SVG where you can, otherwise a PNG at twice the display size: 256 px for slides, 1024 px for print.

The bottom line

24 px is your friend. Go smaller only for dense, text-heavy spots (and switch to solid if lines look faint), go bigger for anything decorative, and always give buttons a generous tap area. Every icon in with icons is drawn on a 24 by 24 grid and comes as an SVG that scales to any size, plus PNGs at 64, 256 and 1024 px.

Frequently asked questions

What is the standard icon size?

24 by 24 pixels is the most common standard for interface icons. Google’s Material Design uses 24 dp as its standard icon size, and most popular icon sets (including with icons) are drawn on a 24 by 24 grid.

What size should icons be on a website?

Use 24 px for most interface icons, like navigation and buttons. Use 16 to 20 px next to small text or in dense tables, and 32 to 64 px for feature sections and decorative areas.

What size should icons be on mobile apps?

Icons are usually 24 px on mobile, inside a much bigger tap area: Apple recommends 44 by 44 points for controls and Google recommends 48 by 48 dp touch targets on Android.

How big should icons be in PowerPoint or Google Slides?

Large enough to see from the back of the room. Use an SVG where you can (PowerPoint, and newer versions of Keynote) so any size stays sharp. For Google Slides, download a 256 px PNG, or 1024 px if the icon fills a big part of the slide.

Should icons be the same size as text?

A little bigger. A good starting point is an icon about 1.25 to 1.5 times the font size: 20 px icons with 14 px text, 24 px icons with 16 to 18 px text.

Sources and notes

1. Material Design 3: Icons (24 dp standard size)
2. Google Fonts: Material Symbols guide (optical size 20 to 48 dp)
3. Android Developers: touch targets of at least 48 by 48 dp
4. Apple Human Interface Guidelines: Accessibility (control sizes)
5. Apple Human Interface Guidelines: Images (@2x and @3x)
6. W3C: Understanding SC 2.5.8 Target Size (Minimum)
7. W3C: Understanding SC 2.5.5 Target Size (Enhanced)
8. Heroicons README (24, 20 and 16 px sets)

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.