---
title: "lzb.constructor.general-settings.icon"
description: "JS filter `lzb.constructor.general-settings.icon` of the Lazy Blocks WordPress plugin."
url: "https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-icon/"
source: "js-filters/lzb-constructor-general-settings-icon.mdx"
---
# lzb.constructor.general-settings.icon

Filters the Icon field of the block builder general settings. Replace the default icon picker when your blocks must use icons from a set of your own instead of arbitrary Dashicons and SVG markup.

## Attributes

| Name           | Type       | Description                         |
| -------------- | ---------- | ----------------------------------- |
| `element`      | **JSX**    | `PanelBody` holding the icon picker |
| `settingsData` | **Object** | `data`, `updateData`                |

`settingsData.data` is the whole block data, so `data.icon` holds the current value and `data.slug`, `data.category`, `data.keywords` and `data.description` hold the values behind the other four general settings. `settingsData.updateData` shallow merges the object you pass it into that block data.

The five general settings render in a fixed order: slug, icon, category, keywords, description. This filter changes what stands in the icon position, it cannot move the field.

## Usage

Ignoring the incoming `element` replaces the field, which is how you narrow the choice to a fixed set.

```js title="JS"
const { PanelBody, SelectControl } = wp.components;

const MY_ICONS = {
  "dashicons-cart": "Cart",
  "dashicons-star-filled": "Star",
  "dashicons-megaphone": "Megaphone",
};

wp.hooks.addFilter(
  "lzb.constructor.general-settings.icon",
  "my.custom.namespace",
  function (element, settingsData) {
    const { data, updateData } = settingsData;

    return (
      <PanelBody>
        <SelectControl
          label="Icon"
          value={data.icon || ""}
          options={[
            { label: "Select icon", value: "" },
            ...Object.keys(MY_ICONS).map((value) => ({
              label: MY_ICONS[value],
              value,
            })),
          ]}
          onChange={(value) => updateData({ icon: value })}
        />
      </PanelBody>
    );
  },
);
```

A replacement has to write to `data.icon` itself, because the element you dropped was the only thing calling `updateData({ icon })`. The builder renders the filtered value as `{settingsIcon || null}`, so returning `false`, `null` or an empty string removes the Icon field and the block keeps whatever icon it already has. The other four fields go through [lzb.constructor.general-settings.slug](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-slug/), [lzb.constructor.general-settings.category](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-category/), [lzb.constructor.general-settings.keywords](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-keywords/) and [lzb.constructor.general-settings.description](https://www.lazyblocks.com/docs/js-filters/lzb-constructor-general-settings-description/).

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt