design basics, explained
Icon design glossary: the terms you need, in plain English
Glyph, keyline, viewBox, currentColor, CC BY. Here are 44 icon words explained in one sentence each, with real icons, so you can follow any design conversation.
- 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.
On this page 9 sections
Icon design has its own small vocabulary: words like glyph, keyline, viewBox and CC BY. This glossary explains 44 of them in plain English, one sentence each, grouped by topic and illustrated with real icons, so you can follow any conversation with a designer or developer.
Every example is a real icon from with icons, our free set of 500 icons in 20 styles (10,000 SVGs).
Jump to a term: A Active state, Affordance, Alt text, aria-label, Attribution · C CC BY, CC0, Commercial use, Contrast, currentColor · D Decorative, Duotone · F Fill, Flat · G Glyph, Grid · I Icon, Icon font, Icon library · K Keyline, Knockout · L Licence · M Metaphor, MIT License · O Open source, Optical size, Outline · P Padding, Pictogram, Pixel snapping, PNG · R Raster · S Skeuomorphic, Solid, Sprite, Stroke, SVG, Symbol · T Tab bar, Tooltip, Touch target · V Vector, viewBox · W Weight
What is the difference between an icon, a glyph, a pictogram and a symbol?
These four words overlap, but each has its own job.
Icon
An icon is a small, simple picture that stands for an object, an action or an idea, such as a magnifying glass that means “search”. Good icons are understood at a glance and usually sit next to a short text label.
Glyph
A glyph is a single drawn shape in a font, such as a letter, a number or a punctuation mark. Simple one-colour icons are often called glyphs too.
Pictogram
A pictogram is a picture that shows its meaning by looking like the real thing, like the walking figure on a crossing sign.
Symbol
A symbol is a sign whose meaning you learn rather than see, such as a heart meaning “like” or a gear meaning “settings”. Most interface icons mix the two: you recognise the bell, but you learn that it means notifications.
Metaphor
An icon metaphor is the everyday object an icon borrows to explain a digital action, like a trash can for “delete” or a paper plane for “send”.
Icon library
An icon library is a collection of icons drawn to match each other, with names, file formats and a licence that says how you may use them. People also say icon set or icon pack. Our plain-English guide to icon libraries goes deeper.
What do SVG, PNG, viewBox and the other file words mean?
These are the words you meet when you download or paste an icon.
Vector
A vector image is a picture stored as shapes and lines, so it can be scaled to any size without getting blurry.
Raster
A raster image (also called a bitmap) is a picture stored as a fixed grid of coloured pixels, so it gets blurry when you enlarge it.
SVG
SVG (Scalable Vector Graphics) is the standard vector image format of the web and the best everyday file type for icons. It is a W3C standard, an icon SVG is usually under one kilobyte, and you can change its colour. See SVG vs PNG icons.
PNG
PNG (Portable Network Graphics) is a raster image format that supports a transparent background, which makes it the safe choice where SVG is not accepted, such as Google Slides or email.
viewBox
The viewBox is the setting inside an SVG file that defines its drawing area, for example “0 0 24 24” for an icon drawn on a 24 by 24 grid. It is why the same SVG keeps its proportions at 16 px or 160 px.
Icon font
An icon font is a font file in which each character is drawn as an icon instead of a letter. Most teams now prefer SVG, which can use several colours and never turns into empty boxes when a font fails to load.
Sprite
An SVG sprite is a single file that holds many icons, so a website downloads them once and shows each one by name.
| Format | Sharp at any size | Recolour later | Works in Google Slides |
|---|---|---|---|
| SVG | Yes | Yes | No |
| PNG | If big enough | Pick colour first | Yes |
| Icon font | Yes | One colour only | No |
What do grid, keyline, stroke and fill mean?
You do not need these drawing words to use icons, but they explain why a good set looks tidy.
Grid
An icon grid is the invisible square of guide units an icon is drawn on, most often 24 by 24, so every icon in a set shares the same proportions. Every with icons icon is drawn once on a 24 by 24 grid, and so is every Lucide icon.
Keyline
Keylines are guide shapes on the icon grid, such as a circle, a square and two rectangles, that help round, square, wide and tall icons look the same size. In with icons a round icon fills a 20-unit circle and a square one an 18-unit square, because circles look smaller.
Padding
Padding (or the live area) is the empty margin kept around an icon inside its grid, so icons never touch the edge and line up neatly with text.
Stroke
A stroke is a line drawn along a path, and stroke width is how thick that line is. Our Line style uses a 1.75 px stroke with round ends (caps) and round corners (joins).
Fill
A fill is the colour inside a closed shape.
Knockout
A knockout (or cutout) is a gap cut out of a filled shape so that inner details stay visible, like the hands on a solid clock icon.
Optical size
Optical size is a version of an icon or font tuned for one display size, usually with heavier lines and fewer details when it is small. Material Symbols, for example, offers optical sizes from 20 to 48.
Pixel snapping
Pixel snapping means lining an icon’s edges up with the screen’s pixel grid, so lines look crisp instead of fuzzy at small sizes. It matters most at 16 to 24 px on ordinary screens.
currentColor
currentColor is a CSS keyword that tells an icon to use the same colour as the text around it. Make a link blue and its icon turns blue too, with no extra work. Every with icons line and solid SVG uses it.
What are the main icon styles called?
A style is the look applied to an icon. with icons draws each icon once and renders it in 20 styles.
Outline
An outline icon (also called a line or stroke icon) is drawn with lines only and leaves the inside empty. It is the most common style in apps and websites. In with icons it is the Line style.
Solid
A solid icon (also called a filled icon) is drawn as filled shapes, which makes it bolder and easier to read at small sizes. Apps often swap an outline icon for its solid twin to show the selected tab.
Duotone
A duotone icon uses two tones, usually a line or shape over a lighter tint, to add depth without clutter.
Flat
Flat design means icons with no shadows, gradients or textures, just clean shapes and plain colours.
Skeuomorphic
A skeuomorphic icon imitates a real object or material, such as leather, metal or paper, with texture, light and shadow. Our Skeuo style does it on purpose.
Weight
Weight is how thick or heavy an icon’s lines look, from thin to bold, much like the weights of a font. Phosphor offers six weights, and Material Symbols lets you set weight with a slider.
Which interface words come up around icons?
These words describe how icons behave inside apps and websites.
Tab bar
A tab bar is the row of icons with short labels, usually at the bottom of a phone app, that switches between the app’s main sections.
Active state
The active state is how an icon looks when its option is switched on or its page is open, often filled instead of outlined or shown in an accent colour.
Affordance
An affordance is a visual clue that tells you what you can do with something, such as a button that looks pressable. A pencil icon hints “you can edit this”.
Touch target
A touch target is the tappable area around an icon, which should be bigger than the icon itself so fingers can hit it easily. WCAG 2.2 asks for at least 24 by 24 CSS pixels, Apple recommends 44 by 44 points and Android recommends 48 by 48 dp.
Tooltip
A tooltip is a short text label that appears when you hover over or focus an icon, explaining what it does. They help, but do not replace a visible label.
What do alt text, aria-label and decorative mean?
These words decide whether screen reader users understand your icons. See our guide to accessible icons.
Alt text
Alt text (alternative text) is a short written description of an image that screen readers read aloud and that appears if the image fails to load.
aria-label
aria-label is an HTML attribute that gives an element, such as an icon-only button, a name that screen readers announce. A trash-can button should be labelled “Delete”.
Decorative
A decorative icon adds no information beyond the text next to it, so it should be hidden from screen readers. On a website that means aria-hidden="true". In PowerPoint and Word, tick “Mark as decorative”.
Contrast
Contrast is how strongly an icon stands out from its background, and WCAG asks for a ratio of at least 3 to 1 for icons that carry meaning.
Label what the icon does: “Delete” on a trash button. Mark it decorative when the text beside it already says it.
Leave an icon-only button unlabelled, so a screen reader just says “button” or reads a file name aloud.
What do MIT, CC BY and attribution mean?
Licence words decide whether you may use an icon and whether you owe a credit. More in our guide to free icons for commercial use.
Licence
A licence is the legal permission that says what you may do with an icon, such as use it commercially, change it or share it.
Open source
Open source means the files are published under a licence that lets anyone use, change and share them, usually at no cost.
MIT License
The MIT License is a short, permissive open-source licence that lets you use, copy, change and sell work made with the files, as long as the licence notice stays with copies of the files themselves. It does not ask for a visible credit on your website or slide. with icons is MIT licensed (our licence).
CC BY
CC BY (Creative Commons Attribution) is a licence that lets you use and change a work for any purpose, including commercial, as long as you give appropriate credit to the creator. Font Awesome Free icons use CC BY 4.0, and The Noun Project’s free icons use CC BY 3.0.
CC0
CC0 is a Creative Commons tool that lets creators give up their rights, so anyone can use the work for anything without giving credit.
Attribution
Attribution is the credit you give a creator, such as “Icons by Jane Doe” with a link, when a licence asks for it.
Commercial use
Commercial use means using something in work that earns money or promotes a business, such as a client website, an advert, a product or a paid course.
| Licence | Commercial use | Use without a credit | Seen in |
|---|---|---|---|
| MIT | Yes | Yes | with icons, Heroicons, Phosphor, Tabler |
| Apache 2.0 | Yes | Yes | Material Symbols |
| CC0 | Yes | Yes | Public domain artwork |
| CC BY | Yes | Credit required | Noun Project free icons, Font Awesome Free |
| Marketplace free plan | Usually | Credit or link | Flaticon, Icons8 |
Where should you go from here?
Next steps: see which icon size to use, how to choose the right icon for an idea, or the PowerPoint and Google Slides guides.
Frequently asked questions
What is the difference between an icon and a pictogram?
A pictogram shows its meaning by looking like the real thing, such as the walking figure on a crossing sign, and is made for public signs. An icon is any small picture standing for an object, action or idea in an interface, and it often relies on a learned meaning, like a gear for settings.
What is the difference between an icon and a symbol?
A symbol is a sign whose meaning is learned rather than seen, like a heart for “like”. Many icons are symbols, but some are pure pictures, such as a camera icon for the camera. Most interface icons mix both.
What does glyph mean in icon design?
In typography a glyph is one drawn shape in a font, like a letter or number. In icon design the word often means a simple one-colour icon, especially in icon fonts, where each icon is literally a glyph in the font.
What is a keyline in icon design?
Keylines are guide shapes on the icon grid, usually a circle, a square and a wide and a tall rectangle. Round icons follow the circle and square icons follow the square, so icons of different shapes look the same size.
What is a viewBox in an SVG?
The viewBox is the attribute that defines the drawing area of an SVG, written as four numbers such as “0 0 24 24”. It lets the browser scale the drawing to any display size while keeping its proportions.
What does decorative mean for an icon?
A decorative icon repeats information that is already in the text next to it, so screen readers should skip it. On websites you hide it with aria-hidden="true"; in PowerPoint and Word you tick “Mark as decorative”.
Do MIT licensed icons need attribution?
No visible credit is needed. The MIT License only asks that the licence notice stays with copies of the files themselves, so you can use MIT icons on websites, slides and products without a credit line.
Sources and notes
- W3C: Scalable Vector Graphics (SVG) 2
- W3C: Portable Network Graphics (PNG) Specification, Third Edition (Recommendation, June 2025)
- MDN: viewBox
- MDN: <color> value (currentColor keyword)
- MDN: aria-label
- MDN: aria-hidden
- W3C: Understanding SC 1.1.1 Non-text Content
- W3C: Understanding SC 1.4.11 Non-text Contrast (3:1)
- W3C: Understanding SC 2.5.8 Target Size (Minimum, 24 by 24 CSS pixels)
- Apple Human Interface Guidelines: Accessibility (control sizes)
- Android Developers: touch targets of at least 48 by 48 dp
- Microsoft Support: Add alternative text (Mark as decorative)
- Nielsen Norman Group: Icon Usability (labels)
- Google Fonts: Material Symbols guide (optical size 20 to 48 dp, weight)
- Phosphor Icons on GitHub (six weights)
- Lucide icon design specification (24 × 24 grid)
- GitHub blog: Delivering Octicons with SVG (2016)
- AIGA Symbol Signs
- The MIT License (Open Source Initiative)
- Creative Commons: CC BY 4.0 deed
- Creative Commons: CC0 1.0 deed
- Font Awesome Free licence (GitHub)
- Noun Project legal and licences (free icons under CC BY 3.0)
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.