简体中文
English
Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is Grommet Icons?
Grommet Icons is a free, open-source icon set built for the Grommet design system, a React-based UI framework. It provides a consistent library of SVG icons that match Grommet's visual language, so teams already using Grommet can drop icons into buttons, navigation, form fields, and status indicators without hunting for a separate icon pack.
What it offers
- A single consistent style: every icon follows the same stroke and sizing conventions, which keeps interfaces visually coherent.
- React components: icons ship as React components, so you import the one you need rather than managing raw SVG files.
- Theme integration: icons inherit color and size from the surrounding Grommet theme, so they adapt to light or dark contexts.
- Broad coverage: the set spans common UI needs such as actions, navigation, media controls, social marks, and status symbols.
Who it suits
The best fit is a team already committed to Grommet. If your app uses Grommet components, adding Grommet Icons means no extra styling work to make icons look native. If you use a different framework, the icons still work as plain SVG, but you lose the convenience of the React components and theme hooks, and you may prefer an icon set designed for your stack.
A quick way to decide: check whether your project already depends on Grommet. If yes, Grommet Icons is the low-friction default. If no, compare it against your framework's own icon library before adding a dependency — for example, Material UI projects often stay with Material UI icons, and Tailwind users may look at Heroicons.
A concrete example
Suppose you are building a settings page in a Grommet app. You need a gear for preferences, a bell for notifications, and a chevron for expandable sections. With Grommet Icons you import those three components, set size and color once, and they inherit your theme — no separate SVG sprite sheet or manual fill attributes.
To start, open the Grommet Icons site and browse the catalogue, then confirm the package name and import path in the Grommet documentation before wiring it into your build.
How do I install and use Grommet Icons in a React project?
Install Grommet Icons as a package and import individual icons as React components. The library is built for React, so each icon is a component you render directly in JSX rather than a font glyph or a CSS class you apply.
Install
npm install grommet-icons
Or with Yarn:
yarn add grommet-icons
If you also want the Grommet component library for layout, theming and controls, install grommet alongside it. The icons package works on its own, but it is designed to pair with Grommet's theme colors and sizing.
Basic usage
import { Search, Add, Close } from 'grommet-icons';
export default function Toolbar() {
return (
<div>
<Search />
<Add color="brand" />
<Close size="small" />
</div>
);
}
Each icon accepts props for common adjustments. Typical ones are color (a theme color name or any CSS color), size (small, medium, large, or a custom value) and standard SVG attributes. Because these are SVG components, you can also pass aria-label or title for accessibility, and onClick if the icon acts as a button.
What to expect in practice
- Named imports keep bundles small. Importing
Searchpulls in that icon, not the whole set. Avoid barrel-importing everything into a single object if bundle size matters. - Icons inherit context. If you wrap your app in Grommet's
Grommetprovider, icons pick up theme colors and dark/light mode automatically. Without the provider, pass explicit colors. - Icons are decorative by default. Screen readers will ignore them unless you add a label. For icon-only buttons, wrap the icon in a button element with an accessible name.
A concrete decision scenario
You are building an admin dashboard with a search field, a settings gear and a delete action in a table row. Use Search inside the input's adornment, SettingsOption in the header, and Trash in the row action. Give the delete icon an aria-label="Delete row" and a click handler. If you later switch to dark mode, the icons follow the theme without per-icon changes — that is the main reason to use this set inside a Grommet app rather than mixing in a separate icon font.
For the full icon list and prop reference, check the official documentation at Grommet Icons and the parent library at Grommet.
What icon sets or styles are available in Grommet Icons?
Grommet Icons is a single icon set rather than a library of separate collections. Its icons are drawn in a consistent line-based style and are distributed as SVG assets, so you use one visual language across an interface instead of mixing families.
What you get
- One coherent style. The set follows a uniform stroke weight and geometric construction, which keeps navigation, actions and status indicators looking related.
- SVG source assets. Because the icons ship as SVGs, you can recolor them with CSS or SVG attributes and scale them without pixelation.
- Framework delivery. The set is published for React through the Grommet component library, and the same assets can be used in plain HTML or other build pipelines.
Practical trade-offs
| Approach | Best when | Watch out for |
|---|---|---|
| Grommet Icons alone | You want visual consistency with minimal curation | Fewer options in niche categories than a multi-family library |
| Grommet Icons plus a second set | You need specialised glyphs, such as brand marks | Mixing stroke weights and corner styles can look uneven |
A designer building a dashboard or settings screen can cover the common cases — search, filters, chevrons, user, notifications, edit, trash — from this one set and avoid the mismatched look that comes from pulling individual icons from different sources.
If you need something the set does not include, check whether a related Grommet component already covers the interaction before adding a second icon family. For broader coverage, Heroicons and Lucide are useful comparisons, though each has its own stroke conventions.
How can I customize the size, color, or styling of a Grommet icon?
Grommet icons are SVG-based React components, so you customize them through props rather than by editing image files. The core controls are size, color, and any styling you pass via className or a wrapping element.
The main props
Size — Grommet icon components accept a size prop that maps to the design system's scale. Typical values are named steps like small, medium, large, xlarge, plus explicit pixel-ish strings such as "24px". Named sizes keep icons aligned with Grommet's typography and spacing rhythm; explicit values are for one-off layouts.
Color — the color prop accepts a color name or value from your theme (for example a brand color key) or a direct CSS color. Because the SVG uses fill: currentColor in most Grommet icons, you can also set the text color on a parent and let the icon inherit it — handy when an icon sits inline with a label.
Styling — beyond those two props, you can pass className and target the SVG in CSS, or wrap the icon in a styled component if you use styled-components. This is where you handle rotation, opacity, drop shadows, or transitions for hover states.
Quick comparison
| Goal | Simplest approach | When to go further |
|---|---|---|
| Match body text | Inherit currentColor from parent |
Only if the parent color is wrong |
| Fit a toolbar | Named size value |
Explicit px when the toolbar has fixed heights |
| Brand accent | color prop with theme key |
CSS if the color must change on hover |
| Animate | Wrap in a styled component | Inline style for one-off transitions |
A concrete pattern
For a button with an icon that shifts color on hover, put the color on the button, not the icon:
<Button color="brand">
<Add /> Add item
</Button>
The icon inherits the button's text color and changes with it, so you maintain one source of truth. For a standalone decorative icon at a fixed size, set both props explicitly.
Decision criteria
- If the icon should follow surrounding text, control color on the parent and leave the icon alone.
- If it must match a specific design token, use the theme key through the
colorprop. - If you need transforms or animation, styling via
classNameor a styled wrapper is the right layer. - If you are overriding many icons the same way, define the change in the theme instead of repeating props.
For the current prop list and available icon names, check the project's own documentation at Grommet Icons and the broader component library at Grommet.
Is Grommet Icons free to use for commercial projects?
Yes. Grommet Icons is free to use in commercial projects. It is an open-source icon set distributed under an open license, so you can include the icons in client work, SaaS products, internal tools and paid applications without paying a license fee.
What "free for commercial use" usually covers
- Product and client work: Embedding icons in websites, dashboards, mobile apps and design systems.
- Modification: Recoloring, resizing and restyling icons to match your brand.
- Redistribution inside a product: Shipping the icons as part of a compiled app or bundled build.
What still deserves a check
Open-source icon licenses typically require attribution or preservation of the license notice, especially if you redistribute the icons as a standalone asset or library. If your legal or brand team needs certainty, confirm the exact license terms shown in the project's repository before shipping, and keep the license text in your dependencies file.
A practical next step
If you are already using Grommet for your interface, Grommet Icons fits naturally into that stack. If you are not, compare it against other open icon sets on two criteria: icon coverage for the actions your product needs, and whether the visual weight matches your typography. Pull the set into a test page, render your five most common icons at your real sizes, and judge legibility before committing.
For teams that want a single consistent source across design and code, the main trade-off is breadth: a general-purpose set may lack niche glyphs, so plan a fallback for specialty icons.
How do I search for or find a specific icon in Grommet Icons?
Grommet Icons is a browsable icon set, so finding one specific icon is mostly a matter of scanning the visible catalog rather than running a query. Open the site and look through the rendered grid of icon names and shapes; the icon you want is usually identified by a short, descriptive name that doubles as its component name in code. If the grid is long, use your browser's built-in page search (Ctrl+F or Cmd+F) and type a keyword like "search," "user," or "calendar." Because each icon is displayed with its name, matching text on the page is often faster than scrolling.
A practical workflow
- Decide on the concept first, then the synonyms. A "settings" icon might be listed under
Configure,Settings, orActions; a "delete" icon might beTrashorClose. - Use browser find on the page to jump to candidate names.
- Confirm the glyph visually, since similarly named icons can look quite different in weight and shape.
- Note the exact name so you can reference it consistently in your project.
If the built-in catalog search isn't enough
Some icon libraries offer a dedicated search field or a separate searchable index; others rely on the gallery plus browser find. If you can't locate a concept, try the broader term rather than the precise label, and check whether the set groups icons by category. For comparison, icon sets such as Heroicons and Feather Icons publish searchable or well-organized galleries you can cross-reference when you need a visual equivalent.
Choosing between similar icons
| Situation | Better fit |
|---|---|
| You need one recognizable action glyph | Pick the most conventional metaphor (magnifier for search, trash for delete) |
| You need visual consistency across a UI | Stay within a single set rather than mixing sources |
| You can't find the exact concept | Choose the nearest semantic match and label it with text |
The main trade-off is breadth versus coherence: a large set gives you more specific icons but makes naming less predictable, while a small, tightly named set is easier to search but may lack a precise match. For a quick decision, search by the word your users would say out loud, not the internal name your team uses.
GoDaddy
Netlify
User reviews (0)