# grommet-icons

> iconography for grommet apps.

Latest version **4.14.0** (published 2025-07-08) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install grommet-icons
pnpm add grommet-icons
yarn add grommet-icons
bun add grommet-icons
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.14.0 |
| Published | 2025-07-08 |
| First published | 2017-09-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 342 |
| Maintainers | ericsoderberg, shimisun, taysea, jcfilben |

## Links

- npm: https://www.npmjs.com/package/grommet-icons
- Repository: https://github.com/grommet/grommet-icons
- Homepage: http://grommet.io/grommet-icons/
- Issues: https://github.com/grommet/grommet-icons/issues
- npm.io page: https://npm.io/package/grommet-icons

## Recent versions

- 4.14.0 (latest) — 2025-07-08
- 3.1.0-beta.1 (next) — 2018-09-10
- 4.13.0 — 2025-06-02
- 4.12.4 — 2025-02-04
- 4.12.3 — 2025-01-31
- 4.12.2 — 2025-01-29
- 4.12.1 — 2024-03-12
- 4.12.0 — 2023-12-13
- 4.11.0 — 2023-06-15
- 4.10.0 — 2023-03-09
- 4.9.0 — 2023-01-26
- 4.8.0 — 2022-08-31
- 4.7.0 — 2021-11-18
- 4.6.2 — 2021-08-25
- 4.6.1 — 2021-08-23
- … 32 more at https://npm.io/package/grommet-icons/versions

## README

[![Slack](http://alansouzati.github.io/artic/img/slack-badge.svg)](http://slackin.grommet.io) [![Build Status](https://travis-ci.org/grommet/grommet-icons.svg?branch=master)](https://travis-ci.org/grommet/grommet-icons) [![Test Coverage](https://codeclimate.com/github/grommet/grommet-icons/badges/coverage.svg)](https://codeclimate.com/github/grommet/grommet-icons/coverage) [![Dependency Status](https://david-dm.org/grommet/grommet-icons.svg)](https://david-dm.org/grommet/grommet-icons) [![PRs Welcome](https://img.shields.io/badge/pr's-welcome-7d4cdb.svg)][contributing]

# grommet-icons

Iconography for Grommet and React.js

## Install

`npm install grommet-icons --save`

or

`yarn add grommet-icons`

## Usage

```javascript
import { Facebook } from 'grommet-icons';

<Facebook />
<Facebook color='plain' />
<Facebook size='large' />
<Facebook size='xlarge' />
```

Visit our [site](https://icons.grommet.io/) for more icons.

## Create Your Own Grommet Icon

Any 24x24px SVG may be converted to an icon using the `<Blank>` icon. For example:

If an icon is decorative and does not need to be read out by assisstive technologies, use `<Blank />` with default properties. If the icon should be read out by assisstive technologies, apply `aria-hidden={undefined}` and an appropriate `a11yTitle` to `<Blank />`.

```javascript
import React from 'react';
import { Blank } from 'grommet-icons';

export const MyIcon = (props) => (
  <Blank {...props}>
    {/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
    <svg
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="12" cy="12" r="5" />
    </svg>
  </Blank>
);

export const MyOtherIcon = (props) => (
  <Blank a11yTitle="Descriptive icon name" aria-hidden={undefined} {...props}>
    {/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
    <svg
      viewBox="0 0 24 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <circle cx="12" cy="12" r="5" />
    </svg>
  </Blank>
);
```

## Try

Check out this [codesandbox](https://codesandbox.io/s/xvr25oxo4o)

## Customize

The theme for the icon supports different colors and sizes. The default definition is:

```
theme = {
  global: {
    colors: {
      icon: '#666666',
    }
  },
  icon: {
    size: {
      small: '12px',
      medium: '24px',
      large: '48px',
      xlarge: '96px',
    },
    extend: undefined,
  },
}
```

You can customize sizing and/or colors by specifying your own theme.
The `colors` property allows you to use color names. For
instance: `colors: { brand: '#ff0000' }` would allow you to use
`<ZoomOut color='brand' />`.

```javascript
import { ThemeProvider } from 'styled-components';
import { base, deepMerge } from 'grommet-icons';
const theme = deepMerge(base, {
  global: {
    colors: {
      brand: '#ff0000',
    },
  },
});
return (
  <ThemeContext.Provider theme={theme}>
    <ZoomOut color="brand" />
  </ThemeContext.Provider>
);
```

## Build

To build this library, execute the following commands:

1. Install NPM modules

   $ npm install (or yarn install)

2. Run pack

   $ npm run build

3. Test and run linters:

   $ npm run lint

4. Generate React icons:

   $ npm run generate-icons

[contributing]: CONTRIBUTING.md

---
_Source: https://npm.io/package/grommet-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._