Skip to main content
Frontend Glossary

Styling & CSS · Visual design

Icon

Also called: Icons, Icon set, SVG icons, Icon font

Simple small graphics that stand for an action or meaning, like a magnifying glass for search or a trash can for delete. They usually come from an icon library with a consistent style.

Example

In detail

Icons save space and help people recognize things quickly, as long as everyone understands what they mean. Universal icons like a magnifying glass, gear, trash can, or plus sign can stand alone. Icons with less obvious meanings should come with a text label, or at least a hover tooltip. Icon-only buttons need an aria-label that describes what they do, so screen readers can read them out.

The mainstream approach is an SVG icon library, imported as needed, so you can freely change color and size. Common ones are Lucide, Heroicons, Tabler Icons, and Material Symbols, and shadcn/ui uses Lucide by default. Stick to one icon library per project so line weight and style stay consistent, and don't mix in emoji.

Common sizes are 16px, 20px, and 24px. Color usually follows the text color (currentColor), and when an icon sits next to text, center them vertically.

Developer info
Term ID
style-icon
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • .anticon
  • .el-icon
  • [class*="MuiSvgIcon-root"]
  • .arco-icon
  • .t-icon
  • .n-icon
  • svg.lucide
  • svg[class*="lucide-"]
  • i[class^="fa-"]
  • i[class*=" fa-"]
  • i.fa
  • i.fas
  • i.far
  • i.fab
  • i[class^="bi-"]
  • .material-icons
  • .material-symbols-outlined
  • .material-symbols-rounded
  • .iconfont
  • i[class^="ri-"]
  • svg.icon
  • svg[data-icon]
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • icon
  • icons
  • iconfont
  • svg-icon
  • ico
  • glyph
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • Icon
  • SvgIcon
Semantic tags and roles

A weak signal. It only counts together with other cues.

  • <svg>
  • <i>
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • icon only
Priority
1 · when several match at the same level, the higher priority wins
Version
v1 · updated Sep 30, 2026