How can I use Grommet Icons in my project?

Updated

Grommet Icons is an icon set you can use in a project that already uses the Grommet framework, or in any React-based interface where you want a consistent set of UI icons. The practical path is: confirm your stack, install the icon package, import the specific icons you need, and render them as components. The main thing to verify before you start is whether your project is React-based, because that determines whether you can use the components directly or need to export the icons as SVG/assets first.

What Grommet Icons actually is

Grommet Icons is the icon library associated with Grommet, a React UI framework. It provides a set of icons intended for interface and web design — navigation, actions, status, and similar UI elements — so that icons match the visual language of Grommet components.

The key relationship to understand: Grommet Icons is not a standalone design tool. It is a resource that pairs naturally with Grommet, and it is consumed in code as icon components.

Before you use it: confirm these three things

Check Why it matters
Is your project React-based? Grommet Icons is distributed for React use; a non-React stack needs a different consumption route (e.g., SVG assets).
Are you already using Grommet? If yes, the icons fit your existing theme and component style with no extra design work. If no, you can still use the icons, but you lose the automatic visual consistency.
Do you need a specific icon, or a whole set? Importing individual icons keeps bundles smaller than pulling in the entire set.

If any of these is unclear, resolve it before writing import statements — it changes the approach.

Step-by-step: using an icon in a React project

  1. Install the icon package. Add the Grommet Icons package to your project with your package manager (for example, npm install grommet-icons or the equivalent for your tooling). Expected result: the package appears in your dependencies.
  2. Import the specific icon. In the file where you need it, import only the icon you want, e.g. import { Search } from 'grommet-icons';. Expected result: the icon component is available in that module.
  3. Render it. Use it as a component in your JSX, e.g. <Search />. Expected result: the icon renders at its default size and color.
  4. Adjust size and color as needed. Pass the props your version supports (commonly size and color) to match your layout. Expected result: the icon matches surrounding text and controls.
  5. Verify in the browser. Check that the icon appears, scales correctly, and inherits the intended color. A common failure is an icon that renders but looks mismatched because color or size was left at default.

Finding the right icon

Use the Grommet Icons site as a reference catalog: browse the available icons, identify the one whose meaning matches your action or status, and note its exact name — the name is what you import in code. Browsing first avoids guessing at names and importing something that does not exist.

A practical habit: when you pick an icon, check whether it reads clearly at the size you will actually use. An icon that looks fine in a catalog can become ambiguous at small sizes in a toolbar.

Common sticking points

  • Importing the whole library. Pulling in every icon increases bundle size; import only what you use.
  • Name mismatches. The import name must match the icon's exported name exactly; a wrong name fails at build time.
  • Non-React projects. If you are not in React, plan to obtain the icons as SVG or another asset format rather than as components.
  • Assuming it is a design plugin. Grommet Icons is consumed in code, not as a Figma-style asset library, unless you separately source the assets.

When this is the right choice

Choose Grommet Icons if you are building a React interface and want icons that visually match Grommet components, or if you simply want a coherent, ready-made UI icon set. Look elsewhere if you need a non-React integration path, a highly custom icon style, or icons outside the standard UI vocabulary — in those cases a different set or custom SVGs will fit better.