---
title: Use the Icon Selector control
category: Sidebar controls in depth
order: 6
status: published
summary: Use the Icon Selector control when editors need to search for and choose an icon from supported icon libraries.
estimatedTime: 5 min
keywords: sideeditprops icon selector iconsets heroicons feather fontawesome
---

In this how-to, you'll learn how to use `SideEditPropType.IconSelector`.

This control is ideal when editors need to pick an icon by meaning rather than by memorizing icon names.

Docs reference:
[Sidebar controls](https://docs.reactbricks.com/bricks/schema/side-edit-props/#icon-selector)

## What the Icon Selector gives you

The Icon Selector is a specialized search control powered by React Bricks.

It is designed for cases like:

- feature cards with an icon
- benefit lists
- service grids
- UI blocks where the icon is part of the editorial decision

The selected prop value is a `types.Icon`, which you can render with the React Bricks `<Icon />` component.

## Example

```tsx {5,11,30-37}
import { Icon, Text, types } from 'react-bricks/rsc'

interface FeatureCardProps {
  title: types.TextValue
  icon?: types.Icon
}

const FeatureCard: types.Brick<FeatureCardProps> = ({ title, icon }) => {
  return (
    <div className="rounded-2xl border p-6">
      {icon ? <Icon icon={icon} className="mb-4 h-8 w-8 text-sky-600" /> : null}

      <Text
        propName="title"
        value={title}
        placeholder="Feature title..."
        renderBlock={({ children }) => <h3>{children}</h3>}
      />
    </div>
  )
}

FeatureCard.schema = {
  name: 'feature-card',
  label: 'Feature Card',
  getDefaultProps: () => ({
    title: 'Fast setup',
  }),
  sideEditProps: [
    {
      name: 'icon',
      label: 'Icon',
      type: types.SideEditPropType.IconSelector,
      iconSelectorOptions: {
        iconSets: [types.IconSets.HeroIconOutline, types.IconSets.Feather],
      },
    },
  ],
}
```

## Restrict the available icon sets

With `iconSelectorOptions.iconSets`, you can limit which icon libraries are available to editors.

That is useful when:

- your design system only uses one icon family
- you want to keep the visual language consistent
- you want to reduce noisy search results

If you omit `iconSets`, all supported sets are available.
Some of the available icon sets are:

- `types.IconSets.Lucide`
- `types.IconSets.HeroIconSolid`
- `types.IconSets.HeroIconOutline`
- `types.IconSets.FontAwesome`
- `types.IconSets.Feather`

## Related reading

- [Use the Select control](/how-tos/sidebar-controls-in-depth/use-the-select-control)
- [Sidebar controls](https://docs.reactbricks.com/bricks/schema/side-edit-props/)