# with icons Journal

> Plain-English guides and honest comparisons about icons, from the makers of with icons (https://withicons.com):
> 500 free, MIT-licensed icons, each drawn once and rendered in 20 styles (line, solid, duo, gloss, engrave, blueprint, sketch, glass, kawaii, sticker, pixel, retro, bauhaus, luxe, skeuo, anime, coquette, gothic, pastel, plush): 10,000 SVGs.

Full text of every article: https://withicons.com/blog/llms-full.txt
Topic hubs: [Comparisons](https://withicons.com/blog/comparisons.html) · [Guides](https://withicons.com/blog/guides.html) · [Design basics](https://withicons.com/blog/design-basics.html) · [AI & tools](https://withicons.com/blog/ai-and-tools.html)

## Comparisons

- [with icons vs Font Awesome: which free icon set should you use?](https://withicons.com/blog/with-icons-vs-font-awesome.html): with icons vs Font Awesome in plain English: the real icons side by side, price, licence, free styles, pros and cons, and which set fits your site or slides.
  - Pick Font Awesome if you need a huge catalogue, brand logos (GitHub, Visa, Slack) or you already pay for Pro.
  - Pick with icons if you want a smaller, carefully matched set that looks great in 20 styles, with an MIT license and no credit needed.
  - Font Awesome Free has over 2,000 icons in Solid, Regular and Brands. Extra styles like Light, Thin and Duotone need a paid plan (from $48 a year).
  - with icons has 500 icons, each drawn once and rendered in 20 styles, so you get 10,000 SVGs that always match each other.
  - Both are free to start. Both work on websites. with icons also gives you ready-made PNG and SVG downloads for slides and docs.
- [with icons vs Hugeicons: 6,000 free icons or 20 free styles?](https://withicons.com/blog/with-icons-vs-hugeicons.html): with icons vs Hugeicons in plain English: the real icons side by side, free icon counts, Pro prices, MIT licences, pros and cons, and which set fits you.
  - Pick Hugeicons if you want the biggest free catalogue in a single, friendly outline style: over 6,000 Stroke Rounded icons under MIT.
  - Pick with icons if you want many looks for free: 500 icons, each in 20 matching styles (10,000 SVGs), all MIT, with no paid tier.
  - Hugeicons’ other 9 styles (solid, bulk, duotone, twotone and sharp variants) and its 60,000+ Pro icons need a paid plan: $99 a year, or $1,197 one time for Pro Plus.
  - Both free sets can be used in commercial work without a visible credit. Both offer an MCP server so AI assistants can find real icon names.
  - If a single outline style is all you need, Hugeicons Free is hard to beat on size. If you want filled, tinted or illustrated icons without paying, with icons is the simpler deal.
- [with icons vs Lucide: should you switch from the default icons?](https://withicons.com/blog/with-icons-vs-lucide.html): with icons vs Lucide with the real icons side by side: 2px vs 1.75px lines, one style vs 20, ISC vs MIT, shadcn/ui, honest pros and cons, and when to switch.
  - Stay with Lucide if one clean outline style is all you need: it has over 1,600 icons, packages for almost every framework, and it is the default in shadcn/ui.
  - Try with icons if you want the same tidy outline look plus filled, tinted and illustrated styles: 500 icons in 20 matching styles, 10,000 SVGs in total.
  - Both are free for commercial use. Lucide uses the ISC licence (icons that came from Feather are MIT). with icons is MIT. Neither asks for a visible credit.
  - Lucide strokes are 2px wide; the with icons line style uses 1.75px, so it reads a touch lighter. Both use a 24 × 24 grid.
  - Lucide is a community fork of Feather. with icons is drawn from scratch, but uses a very similar component style, so switching takes minutes.
- [with icons vs Material Symbols: which free icon set fits you?](https://withicons.com/blog/with-icons-vs-material-symbols.html): with icons vs Google’s Material Symbols: the real icons side by side, honest pros and cons, styles, the variable font, licences, and which one suits you.
  - Pick Material Symbols if your app follows Google’s Material Design or Android, or you need more than 2,500 icons from one maker.
  - Pick with icons if you want your product to look like your brand rather than Google’s, with 20 matching styles and ready-made PNG and SVG files for slides.
  - Material Symbols comes in 3 styles (Outlined, Rounded, Sharp) inside a variable font with sliders for fill, weight, grade and size.
  - Both are free for commercial use. Material Symbols uses Apache 2.0, with icons uses MIT, and neither asks you to show a credit.
  - with icons has 500 icons drawn once and rendered in 20 styles (10,000 SVGs). Material Symbols has about five times as many icons, but one design language.
- [with icons vs Heroicons: two small icon sets, compared honestly](https://withicons.com/blog/with-icons-vs-heroicons.html): with icons vs Heroicons with the real icons side by side: 316 icons in four sizes vs 500 in 20 styles, MIT licences, Tailwind CSS, and honest pros and cons.
  - Pick Heroicons if you build with Tailwind CSS and want icons hand-tuned for very small sizes: 316 icons in Outline, Solid, Mini (20px) and Micro (16px).
  - Pick with icons if you want more icons and more looks from one family: 500 icons in 20 styles (line, solid, duo and 17 creative styles such as glass, pixel and retro), 10,000 SVGs in all.
  - Both are free and MIT licensed, with no visible credit needed. Both work with Tailwind classes, because both use the current text colour.
  - Heroicons has official React and Vue packages. with icons has those plus Svelte, Angular, Solid, a web component and CSS classes, all on npm.
  - with icons has more icons (500 vs 316), but the bigger difference is extra sizes (Heroicons: 4 versions of each icon) versus extra styles (with icons: 20).
- [with icons vs Phosphor: 6 weights or 20 styles, which suits you?](https://withicons.com/blog/with-icons-vs-phosphor.html): with icons vs Phosphor, explained simply: six weights vs 20 styles, about 1,500 vs 500 icons, real icons side by side, pros and cons, and which to pick.
  - Pick Phosphor if you want about 1,500 icons, each in six weights (Thin, Light, Regular, Bold, Fill, Duotone), and official packages for Flutter and SwiftUI as well as the web.
  - Pick with icons if you want looks with more character: 500 icons in 20 styles, from plain line and solid to glossy, frosted glass, pixel art, retro and hand-drawn.
  - Both are free and MIT licensed, with no visible credit needed and no paid tier.
  - Phosphor’s weights change how thick an icon is. with icons’ styles change how it feels. Both include a filled and a two-tone version.
  - Phosphor has official Flutter, SwiftUI and Elm packages (React Native via the community). with icons adds an MCP server for AI tools and one-click PNG copies for slides.
- [with icons vs Tabler Icons: 500 curated icons or 6,000+?](https://withicons.com/blog/with-icons-vs-tabler-icons.html): with icons vs Tabler Icons in plain English: 6,200+ outline and filled icons vs 500 icons in 20 styles, real icons side by side, pros and cons, and which to pick.
  - Pick Tabler Icons if you need breadth: over 6,200 free icons (outline plus filled versions), with ready packages for most frameworks.
  - Pick with icons if you want a smaller set that is quick to search and comes in 20 matching styles, from simple line to frosted glass, pixel art and hand-drawn sketch.
  - Both are free and MIT licensed, so you can use them commercially without showing a credit.
  - Tabler offers 2 looks (outline and filled) with a 2px line. with icons offers 20 styles from one drawing, with a slightly lighter 1.75px line.
  - with icons adds one-click Copy image, PNG and SVG downloads for slides and docs. Both have npm packages; Tabler covers a few more frameworks.
- [with icons vs Flaticon: free icons with or without the credit line](https://withicons.com/blog/with-icons-vs-flaticon.html): with icons vs Flaticon for non-designers: honest pros and cons, what Flaticon attribution means in slides and Canva, Premium pricing, and no-credit options.
  - Pick Flaticon if you need a very specific or illustrated icon: it has over 18 million icons and stickers from many artists.
  - Pick with icons if you want free icons with no credit line, as PNG or SVG, that all match each other in 20 styles.
  - Free Flaticon icons require attribution: a line like “Icon made by [author] from Flaticon” near the icon or in your credits. Premium removes that rule.
  - Flaticon Premium costs $99 a year for US customers (about $8.25 a month), with a month-to-month option too. Prices are shown in local currency.
  - with icons is MIT licensed: 500 icons in 20 styles (10,000 SVGs), free for personal and commercial use, no credit and no account.

## Guides

- [How to change the colour of an icon (SVG, PNG, slides, websites)](https://withicons.com/blog/how-to-change-icon-color.html): Change an icon’s colour in PowerPoint, Keynote, Google Slides, Canva, Figma or CSS. Why SVG recolours and PNG does not, plus brand colours and contrast.
  - SVG icons can be recoloured, PNG icons mostly cannot. An SVG stores its colour as a setting you can change. A PNG has its colour baked into the pixels.
  - PowerPoint and Word: select the SVG, open the Graphics Format tab and choose Graphics Fill. Use Convert to Shape to colour parts separately.
  - Google Slides, Google Docs and email: they do not take SVG, so choose your colour on the icon page before you download the PNG.
  - Websites: icons drawn with currentColor simply take the text colour, so one line of CSS (color: #2F5BFF) recolours them.
  - Check contrast: an icon that carries meaning needs at least 3:1 contrast with its background (WCAG 2.2). Pale yellow on white fails.
- [How many icons does a website need? A practical answer](https://withicons.com/blog/how-many-icons-does-a-website-need.html): How many icons a website needs, with rule-of-thumb ranges for business sites, blogs, shops, SaaS apps and dashboards, the core 30 icons, and when to add text labels.
  - 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.
- [Should you use icons on a resume? How to do it well](https://withicons.com/blog/icons-on-a-resume.html): Icons can make a resume easier to scan, but ATS software may skip them. How to add icons safely in Word, Google Docs and Canva, at the right size for print.
  - Yes, but only as helpers. Small icons next to your contact details and section headings can make a resume quicker to scan.
  - Never put information only in an icon. Applicant tracking systems (ATS), the software many employers use to read resumes, may skip images or turn icons into random characters. Always write the words too: “Email: you@example.com”.
  - Keep them simple: thin line icons, one colour, about the same size as your text, in the main body of the page (not the header or footer).
  - Skip skill bars, star ratings and brand logos. Software cannot read “4 out of 5 stars”, and recruiters cannot tell what it means anyway.
  - Test it: copy your whole resume and paste it into a plain text editor. If anything important is missing, it needs words.
- [The best free icon libraries in 2026, compared](https://withicons.com/blog/best-free-icon-libraries.html): A fair, plain-English look at 10 free icon libraries in 2026: Font Awesome, Material Symbols, Lucide, Tabler, with icons and more, plus how to choose.
  - There is no single best free icon library. The right one depends on what you are making and how many icons you need.
  - Biggest free MIT sets: Tabler Icons (over 6,200) and Hugeicons (6,000+ free). Most famous: Font Awesome. Best for Android: Material Symbols.
  - Best for React and shadcn/ui: Lucide. Best for Tailwind: Heroicons. Most weights: Phosphor (6). Best for Bootstrap: Bootstrap Icons.
  - Best for one set across code, slides and docs, in 20 styles, with no credit: with icons (our own set, 500 icons, 10,000 SVGs).
  - Marketplaces like Flaticon and Icons8 have millions of icons, but their free plans ask for a credit or a link back.
- [How to use icons in PowerPoint, Google Slides and Keynote](https://withicons.com/blog/icons-in-presentations.html): Add icons to PowerPoint, Google Slides and Keynote the right way: SVG or PNG, recolouring, sizing, alignment and simple layouts that make slides look professional.
  - PowerPoint: use the SVG file. It stays sharp at any size and you can recolour it with Graphics Fill (and Graphics Outline for line icons).
  - Google Slides: use a PNG. Google Slides accepts PNG, JPEG and GIF images, not SVG, so download a 512 px PNG in the colour you want.
  - Keynote: recent versions (13.1 and later) accept SVG. On older versions, a 1024 px PNG works everywhere.
  - Use one icon style per deck, keep every icon the same size, and line them up with the Align and Distribute tools.
  - The layout that never fails: icon + three-word label, in rows of three or four.
- [Can I use free icons commercially? Icon licenses in plain English](https://withicons.com/blog/free-icons-commercial-use.html): Can you use free icons in commercial work? MIT, ISC, Apache 2.0, CC BY, CC0, SIL OFL, Flaticon and Icons8 licenses explained in plain English, with a decision table.
  - Usually yes. Almost every popular free icon license allows commercial use. What changes is what you must do in return.
  - No visible credit needed: MIT, ISC, Apache 2.0 and CC0. Keep the license text with the files if you pass the icon files or code on to others.
  - Credit needed: CC BY 4.0, and the free plans of marketplaces like Flaticon and Freepik. A link needed: Icons8’s free plan.
  - Brand logos are different. An icon license covers the drawing, not the trademark. Use logos only to refer to that brand.
  - with icons is MIT: free for personal and commercial use, no attribution required.
- [How to use icons on a landing page (without making it look cheap)](https://withicons.com/blog/icons-on-landing-pages.html): Use icons on a landing page the way good designers do: feature grids, icon + headline + one line, one style and size, when to go bold, and accessibility basics.
  - 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.
- [How to add icons to your website (no coding needed)](https://withicons.com/blog/how-to-add-icons-to-a-website.html): Add free icons to WordPress, Wix, Squarespace, Webflow, Framer, Shopify or HTML: which file to upload, SVG support per platform, and quick fixes.
  - 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.

## Design basics

- [What is an icon library? A plain-English guide for non-designers](https://withicons.com/blog/what-is-an-icon-library.html): An icon library is a set of matching icons with names, file formats and a licence. Learn what is inside one, free vs paid options and how to choose and use one.
  - An icon library is a collection of small pictures (icons) drawn to match each other, with names, file formats and a licence that says how you may use them.
  - Inside you usually get: the icons, one or more styles (outline, solid and so on), formats such as SVG and PNG, searchable names, and a licence.
  - Using one library instead of random icons from the web keeps your work consistent and your use legal.
  - Many good libraries are free. Open-source ones (MIT, ISC, Apache 2.0) need no visible credit; marketplace free plans usually ask for a credit or link.
  - To choose, check that it has the icons you need, a style that fits, the formats your apps accept, and a clear licence. Examples: with icons (500 icons in 20 styles), Font Awesome, Material Symbols, Lucide and Tabler.
- [3D icons vs flat icons: which should you use in 2026?](https://withicons.com/blog/3d-icons-vs-flat-icons.html): Flat or 3D icons? Use flat icons for buttons and menus, 3D icons for heroes, slides and marketing at 32px+. A decision table, file sizes and history.
  - Flat icons (line, solid, duotone) are simple shapes with no fake light or depth. They are the right choice for buttons, menus, tabs, forms and dashboards, at any size.
  - 3D or dimensional icons (gloss, glass, luxe, skeuo) add highlights, shadows and materials. They shine on landing pages, slides, app-store graphics and posters, at 32px or larger.
  - Most good products in 2026 use both: flat icons where people click, and one dimensional style where people look.
  - Flat SVG icons are tiny (our line style is about 0.4 KB per icon). Dimensional SVGs are richer but still only a few kilobytes each, so use them for a handful of big moments, not long lists.
  - Design swung from realistic (skeuomorphic) to flat around 2012 to 2013, then back towards gentle depth. Today’s best practice is flat for function, depth for delight.
- [Icon design glossary: the terms you need, in plain English](https://withicons.com/blog/icon-glossary.html): Plain-English definitions of 44 icon design terms: glyph, pictogram, SVG, viewBox, stroke, keyline, duotone, touch target, aria-label, MIT and CC BY.
  - An icon is a small picture that stands for an object, action or idea. A pictogram looks like the real thing, a symbol has a learned meaning, and a glyph is one drawn shape in a font.
  - SVG is a vector format that stays sharp at any size. PNG is a pixel format for apps that do not accept SVG. The viewBox sets an SVG’s drawing area.
  - Icons are drawn on a grid (usually 24 by 24) with keylines and padding, using strokes (lines) and fills (filled shapes).
  - For accessibility, give meaningful icons a label (alt text or aria-label) and hide decorative ones from screen readers.
  - MIT and CC0 need no visible credit, CC BY requires attribution, and all three allow commercial use.
- [Cute and playful icon styles: kawaii, pixel, sticker, retro and more](https://withicons.com/blog/playful-icon-styles.html): Kawaii, sticker, pixel, retro, pastel and more: what each cute icon style looks like, where it works (kids, games, social, slides) and where to avoid it.
  - Playful icon styles are icons drawn like tiny illustrations: soft shapes, bright or pastel colours, faces, stickers or pixels. with icons has nine of them among its 20 styles.
  - The nine: kawaii (cute faces), sticker (die-cut vinyl), pixel (16-bit game art), retro (70s patches), bauhaus (playful geometry), plush (felt toys), pastel (soft colour fields), anime (cel-shaded) and coquette (bows and pearls).
  - Where they shine: kids’ apps, games, social posts, stickers, newsletters, event invites, classroom handouts and slides, at 32px or larger.
  - Where to skip them: dense interfaces under 32px, and serious tools for money, health or legal matters, where calm line or solid icons build more trust.
  - Keep one playful style per page and pair it with a matching font: rounded fonts for kawaii, a pixel font for headings with pixel icons, geometric fonts for bauhaus.
- [Icons in dark mode: what changes and how to get it right](https://withicons.com/blog/dark-mode-icons.html): How icons behave in dark mode: why they look bolder, how currentColor makes them follow the theme, contrast checks, which styles hold up and why PNGs vanish.
  - In dark mode, icons must switch to a light colour, and they look slightly bolder than the same icon on white, because bright shapes on dark spread a little in your eye.
  - Use icons drawn with currentColor: they take the text colour, so when your page turns dark, every icon follows without a second set of files.
  - Check contrast on the dark background too: meaningful icons need at least 3:1 (WCAG 2.2). A cobalt blue that scores 5.17:1 on white drops to 3.62:1 on dark grey.
  - Prefer a dark grey background and an off-white icon over pure black and pure white. It is easier on the eyes and looks less harsh.
  - Watch out for black PNGs on transparent backgrounds: on a dark page they almost disappear (about 1:1 contrast). Use SVG, or a mid-tone or light PNG.
- [Animated icons: when they help, when they hurt, and how to use them](https://withicons.com/blog/animated-icons.html): When animated icons help and when they hurt: SVG, Lottie and GIF in plain words, WCAG motion rules, reduced motion, speed tips, and moving icons in slides and email.
  - Animated icons help when the motion means something: feedback (a heart beats when you tap like), a change of state (play turns into pause), loading, or pointing at one new thing once.
  - They hurt when they loop forever, when several move at once, or when they move for decoration only. Motion pulls the eye, so it competes with your content.
  - Respect the reduce motion setting (prefers-reduced-motion). WCAG 2.2.2 asks for a way to pause anything that moves on its own for more than five seconds next to other content.
  - Keep it fast: animate only transform and opacity, and keep most interface motion between about 100 and 500 milliseconds.
  - For slides and email use a GIF (or MP4 in Keynote and PowerPoint). Every with icons icon has its own motion you can download as animated SVG, GIF, MP4 or Lottie, free.
- [App icon vs UI icon: what’s the difference?](https://withicons.com/blog/app-icon-vs-ui-icon.html): An app icon represents a whole app on a home screen or store; UI icons are the small symbols inside it. Sizes, shapes, formats, favicons and common mistakes.
  - An app icon is the one picture that represents a whole app on a home screen, in a dock or in the App Store and Google Play. It works like a logo.
  - UI icons (user interface icons) are the many small symbols inside the app: search, settings, share, trash. They work like road signs.
  - Sizes differ a lot: Apple lists a 1024 x 1024 px app icon for iPhone, iPad and Mac, and Google Play asks for a 512 x 512 px PNG. UI icons are usually 16 to 24 px.
  - Shapes are handled for you: you hand over a full square, and the system rounds the corners or crops it to a circle. Don’t round it yourself.
  - An icon library is for UI icons, not your app icon, which should be unique to you. A favicon is a third kind: the tiny site icon in a browser tab.
- [Line, solid, duotone and more: icon styles explained with pictures](https://withicons.com/blog/icon-styles-explained.html): A picture-first guide to icon styles: line, solid and duotone for interfaces, plus 17 creative styles from glass and pixel to kawaii. What each is for.
  - Line (outline) icons are drawn with a thin stroke. They are calm and clear, and the best default for menus, buttons and forms.
  - Solid (filled) icons are filled shapes. Use them for the selected tab or button, for very small sizes, and on busy backgrounds.
  - Duotone icons add a soft second tone behind the outline. They feel friendly in dashboards, cards and onboarding screens.
  - Creative styles are mini illustrations. with icons has 17 of them in four families: shiny and 3D (gloss, glass, luxe, skeuo), printed and hand-made (engrave, blueprint, sketch, gothic), retro and graphic (retro, bauhaus, pixel), and cute (kawaii, sticker, plush, pastel, anime, coquette). Use them at 32px or larger.
  - Pick one style per area of your page. The one common mix is line for normal states and solid for the active one.
- [SVG vs PNG icons: which should you use?](https://withicons.com/blog/svg-vs-png-icons.html): SVG or PNG for icons? A plain-English guide to sharpness, file size and colour, plus a clear table for websites, PowerPoint, Google Slides, Canva, Word and email.
  - Use SVG whenever your app accepts it: websites, PowerPoint, Word, Canva, Figma and newer Keynote. It stays sharp at every size and you can change its colour.
  - Use PNG where SVG is not supported: Google Slides, Google Docs, Notion and email. Download it at least twice the size you will show it.
  - An SVG is a recipe of shapes, so the computer redraws it perfectly at any size. A PNG is a fixed grid of pixels, so it goes blurry when you stretch it.
  - For a single small icon, the file size difference is tiny. At big sizes, SVG wins easily: our home icon is about 0.4 KB as SVG and about 11.5 KB as a 512 px PNG.
  - Icon fonts are an older trick. Today SVG is the better choice for most projects.
- [Accessible icons: a friendly guide to icons everyone can understand](https://withicons.com/blog/accessible-icons.html): A friendly guide to accessible icons: text labels, names for icon-only buttons, decorative icons, 3:1 contrast, tap target sizes and not relying on colour alone.
  - Add a text label next to icons whenever you can. Only a few icons, like home, print and search, are understood by almost everyone.
  - Icon-only buttons need a name. Screen readers cannot see the picture, so give the button a hidden label such as “Search” (on the web, with aria-label).
  - Hide decorative icons from screen readers when the text next to them already says the same thing.
  - Contrast and size: meaningful icons need at least 3:1 contrast with their background (WCAG 1.4.11), and tap targets should be at least 24 by 24 px (WCAG 2.5.8), ideally 44 or more.
  - Never rely on colour alone. Use different shapes and words, not just red and green.
- [What size should icons be? A simple guide for web, apps and slides](https://withicons.com/blog/icon-sizes-guide.html): A simple guide to icon sizes: 16, 20, 24, 32 and 48 px, matching icons to text, tap targets (WCAG, Apple, Android), and what size PNG to use for slides and print.
  - 24 px is the standard icon size for websites and apps. Most icon sets, including with icons and Google’s Material icons, are designed on a 24 by 24 grid.
  - Use 16 to 20 px for small, dense spots (tables, small text), and 32 to 48 px or more for feature sections, empty states and hero areas.
  - Match icons to your text: a 24 px icon sits well next to 16 to 18 px text. Stick to two or three sizes across a whole product.
  - Buttons need room to tap: at least 24 by 24 px (WCAG 2.2), with Apple recommending 44 by 44 points and Android 48 by 48 dp. Padding does the work, not a bigger icon.
  - For slides and print, use an SVG, or a PNG at least twice the size you will show it (256 px for slides, 1024 px for big slides and print).
- [Why mixing icon sets looks cheap (and how to fix it in an afternoon)](https://withicons.com/blog/consistent-icons.html): Mixed icon sets make a site or deck feel cheap. Learn what makes icons consistent, run a 10-minute audit, and replace mismatched icons in an afternoon.
  - Mixed icons look cheap because every icon set follows its own rules: line thickness, corner shape, size, fill and level of detail. Your eye notices the clash even when you cannot name it.
  - Icons look consistent when six things match: stroke width, corners and line ends, grid and padding, fill, visual weight and metaphors.
  - Spot problems with a 10-minute audit: screenshot every screen or slide, put all the icons side by side, and squint.
  - Fix it by picking one icon family, listing every icon you use, and replacing them one screen at a time in one style, one size and one colour.
  - You can still mix styles on purpose: outline for normal, filled for active, and a bolder style for hero sections, as long as they all come from the same family.
- [How to pick the right icon: meaning, labels and common mix-ups](https://withicons.com/blog/choosing-the-right-icon.html): Choose icons people understand: common mix-ups (save, settings, share, favourites, menu), when to add a text label, cultural traps, and a 5-person test.
  - The right icon is the one people read correctly in about a second. Pick the most familiar picture, not the most clever one.
  - Add a text label to almost every icon. Usability researchers at Nielsen Norman Group found that only a few icons, such as home, print and the magnifying glass for search, are close to universal.
  - Watch the classic mix-ups: gear (settings) vs sliders (adjust this view), heart (like) vs star (rate or favourite) vs bookmark (save for later), bell (notifications) vs inbox (messages).
  - Meanings change across countries and platforms: a tick can mean “wrong” in some school systems, and iPhone and Android use different share icons.
  - Test with five people: show the icon, ask what it does, and fix anything that makes them hesitate.
- [Icon design trends for 2026: what’s in, what’s out](https://withicons.com/blog/icon-design-trends-2026.html): The icon design trends shaping 2026: frosted glass, tactile 3D and skeuomorphism, pixel and retro nostalgia, kawaii cuteness, Bauhaus geometry and more.
  - In for 2026: frosted glass and gloss, tactile 3D (skeuomorphism is back), pixel and 70s retro nostalgia, cute kawaii, sticker and plush looks, and bold Bauhaus geometry.
  - Still strong: soft duotone, hand-drawn sketch warmth, technical blueprint lines and engraved “heritage” detail.
  - Out: mixing random icon sets, using one flat style for every job, tiny detailed icons at 16px, and icons that disappear on dark backgrounds.
  - Behind the scenes: adjustable stroke weights, one icon drawn once in many styles, clean dark mode and AI help. Apple’s glassy Liquid Glass design (June 2025) pushed depth back into fashion.
  - You do not need to chase every trend. Keep a calm style for buttons and menus, and use the expressive looks in hero sections, slides and illustrations.

## AI & tools

- [How to get great icons from ChatGPT, Claude and other AI assistants](https://withicons.com/blog/ai-assistants-and-icons.html): Why ChatGPT, Claude and Gemini invent icon names, and how to fix it with MCP, llms.txt and Ask AI buttons. Copy-paste prompts for slides, websites and code.
  - AI assistants invent icon names because they predict likely-sounding words from memory, and every icon set names things differently (“house”, “home”, “fa-house”).
  - The fix is to let the assistant look up a real list instead of guessing: connect an MCP server, point it at an llms.txt file, or start from a ready-made brief.
  - with icons offers all three: an MCP server at https://withicons.com/mcp, a plain-text guide at withicons.com/llms.txt, and “Ask AI” buttons on the site for Claude, ChatGPT, Gemini, Perplexity and Grok.
  - No coding needed: paste one line that tells the assistant where to read, describe what the icon is for, and ask for exact names with links.
  - Always check the answer: every icon should have a working link, one style per area, and a text label or accessible name.