Skip to main content

Using the Block Icon Library

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. The icon name copies automatically to your clipboard. You create your feature following the Feature API 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. 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:

    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.

In this section: