How to Browse and Find Icons on Grommet Icons

Grommet Icons (icons.grommet.io) is a visual icon library site: its main purpose is to let you browse the available icons and find the one you need by name or category. You can scan the icons visually, search or filter the set, and open an individual icon to see its details and how to use it. The steps below describe the typical workflow for finding an icon and getting the information needed to use it.

What the site is for

The site is a browsable catalog of the Grommet icon set. Rather than reading documentation first, you land on a gallery of icons and work from there. That makes it useful when you:

• Know roughly what you want ("a search icon") but not its exact name.
• Want to see the full set to pick something visually consistent.
• Need the identifier or usage details for a specific icon before adding it to a project.

Finding an icon by name

If you already know what the icon represents, search is the fastest route.

1. Locate the search field on the page.
2. Type a keyword describing the icon, such as search, user, or close.
3. Watch the gallery narrow to matching icons as you type.
4. Click the icon you want to open its detail view.

Expected result: the grid filters down to icons whose names match your term, and selecting one shows its individual page or panel.

Common snag: icon names are usually single, lowercase words. If a search returns nothing, try a simpler or more generic term (for example, trash instead of delete).

Browsing by category

When you don't have a specific name in mind, browsing by category helps you compare related icons side by side.

1. Look for the category or grouping controls near the top of the gallery.
2. Select a category that matches your intent (for example, navigation, actions, or media).
3. Scroll through the filtered set and compare shapes and styles.
4. Click any icon to inspect it further.

Expected result: the gallery shows only icons in the chosen category, making it easier to pick one that fits your design.

Reading an individual icon's details

Opening a single icon gives you the information you need to actually use it.

• Name / identifier — the exact string you reference in code or design tools.
• Visual preview — the icon at its rendered size, so you can judge weight and clarity.
• Usage or code snippet — where provided, the import or markup needed to include it.

Expected result: you leave the detail view knowing the icon's exact name and how to reference it.

Choosing between search and browse

Practical tips

• Start broad, then narrow: a short keyword usually beats a long phrase.
• If a term fails, try a synonym before assuming the icon doesn't exist.
• Use the detail view to confirm the exact name — small spelling differences matter when you reference an icon in code.
• Browse by category when consistency across a set matters more than finding one specific glyph.

Once you've found your icon and noted its name, you have everything needed to use it in your project.