# @bolttech/atoms-icon

> The `Icon` component is based on the [Material Symbols](https://fonts.google.com/icons?icon.style=Sharp&icon.set=Material+Symbols) icons. It includes all the icons with the **weight of 300**.

Latest version **0.24.9** (published 2026-06-08) · 0 weekly downloads

## Install

```sh
npm install @bolttech/atoms-icon
pnpm add @bolttech/atoms-icon
yarn add @bolttech/atoms-icon
bun add @bolttech/atoms-icon
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.24.9 |
| Published | 2026-06-08 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 54.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/atoms-icon
- npm.io page: https://npm.io/package/@bolttech/atoms-icon

## Dependencies (3)

- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7

## Recent versions

- 0.24.9 (latest) — 2026-06-08
- 0.24.8 — 2026-04-14
- 0.24.6 — 2026-04-08
- 0.24.5 — 2026-04-08
- 0.24.4 — 2026-04-08
- 0.24.3 — 2026-04-08
- 0.24.2 — 2026-03-05
- 0.24.1 — 2025-10-13
- 0.24.0 — 2024-12-05
- 0.23.0 — 2024-09-04
- 0.22.1 — 2024-01-11
- 0.22.0 — 2023-11-21
- 0.21.2 — 2023-11-07
- 0.21.1 — 2023-11-06
- 0.21.0 — 2023-11-06
- … 33 more at https://npm.io/package/@bolttech/atoms-icon/versions

## README

# Icon

## Summary

The `Icon` component is based on the [Material Symbols](https://fonts.google.com/icons?icon.style=Sharp&icon.set=Material+Symbols) icons. It includes all the icons with the **weight of 300**.

## Requirements

- Node 16

## Installation

Install the `Icon` package on your project, with the following command:

```
npm i @bolttech/atoms-icon@version
```

After installing the package, it should come with the [@material-symbols/font-300](https://www.npmjs.com/package/@material-symbols/font-300) as a `peerDependencie`. Check if it was correctly installed on your project and if not, please install it running:

```
npm i @material-symbols/font-300@version
```

## Configuration

To correctly see your icons, you need to import the styles on your project main file, for an exemple, on a `Next.js` project, you should import it on your `_app.tsx`, or, if using `Create React App`, you can add it on your `App.js`.

#### Next.js example:

```ts
// _app.tsx

import type { AppProps } from 'next/app';
import type { NextPage } from 'next';

import '@material-symbols/font-300/sharp.css'; // add this line

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
```

#### Create React App example:

```js
// App.js

import React from 'react';

import '@material-symbols/font-300/sharp.css'; // add this line

const App = () => <h1>Hello-world</h1>;

export default App;
```

## How to use

After the basic configuration, you are ready to use the `Icon` component on your project. Be sure to provide a valid name of an **symbol** available on the [Material Symbols](https://fonts.google.com/icons?icon.style=Sharp&icon.set=Material+Symbols) list.

#### Example

```ts
import { Icon } from '@bolttech/atoms-icon';

export default function Component() {
  return (
    <Icon
      id="id"
      dataTestId="date-test-id"
      icon="credit_card"
      color="red"
      fill={false}
      size={24}
    />
  );
}
```

## Running unit tests

Run `nx test atoms-icon` to execute the unit tests via [Jest](https://jestjs.io).

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