Use the Icon Selector control

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

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

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
• Sidebar controls