# Using the Block Icon Library

Source: https://docs.arcxp.com/en/products/pagebuilder/pagebuilder-editor/developer-tools-overview/using-the-block-icon-library.html

Use the Block Icon Library page in Page Builder Editor’s Developer Tools to browse and add supported icons to your features and chain configurations.

Icons enhance the curation experience in PageBuilder Editor. These icons appear in both List View and Grid View when editors use the **Blocks** panel on the Curate workspace.

> **Important:**
> 
> PageBuilder Editor _only_ supports icons from the block icon library, not from custom libraries.

## Scenario: Adding an icon for an alert bar feature

As a developer for a news organization, you want to create an alert bar for your news site.

You access PageBuilder Editor > Developer Tools > Block Icon Library and click the `alarm-bell-ring` icon ![icon_alarm_bell_ring.png](https://docs.arcxp.com/images/learning-center/image/img-c3dd6f8e73921720361b2043e0397560.png). The icon name copies automatically to your clipboard. You create your feature following the [Feature API](https://dev.arcxp.com/pagebuilder-engine/developer-docs/feature-api/#%5Ftop) guide, including the icon in your alert bar block configuration.

After deploying your bundle, editors can find your new alert bar block in the PageBuilder Editor’s **Blocks** panel when curating pages.

## Procedure

## Using the Block Icon Library

Follow these steps to add icons to your components:

1. Navigate to **PageBuilder Editor** \> **Developer Tools** \> **Block Icon Library**. The Block Icon Library page displays all icons available.
2. Click on your desired icon, like ![icon_alarm_bell_ring.png](https://docs.arcxp.com/images/learning-center/image/img-c3dd6f8e73921720361b2043e0397560.png). This copies the icon’s string value— `alarm-bell-ring`—to your clipboard, displaying a green confirmation message.
3. In your code editor, add an `icon` field to your feature or chain component.
4. Paste the copied icon string as the value of the `icon` field. Your code should look like this:  
```javascript
const AlertBar = (props) => {
  // Component implementation
}
AlertBar.icon = 'alarm-bell-ring'
```
5. Export your component.

After deploying your bundle with the new component, it appears in the **Blocks** panel on the **Curate** workspace with its corresponding icon.