Home App Docs Blog Github

How to give my custom components an icon image?

Giving extra care to how your registered custom components appear in the editor is something we see in common in between all our most successful customer teams using Builder.io, and here I want to highlight the ability to add a meaningful icon to your custom components which will help with the content creator experience immensely, the following steps will help you add a custom icon for your custom component

Prepare the icon asset

You have two options here:

1. You already have the image asset you want to use for your component:

If you already have an icon handy, this is very simple:

2. Use a public Icon library

There are multiple available online, each has their own license, you can buy premium ones on Themeforest or any graphic assets marketplace, or use an open source one like css.gg , get the URL for the icon you’d like to use, or upload it directly like in option 1

Then use it in your custom component registration

Builder.registerComponent(LazyProductGrid, {
  name: 'ProductGrid',
  // image is the icon that will appear in the editor
  image: 'https://unpkg.com/css.gg@2.0.0/icons/svg/play-list-add.svg',
  description: 'Pick products free form',
  ...

Now in the edtior, an icon will appear in the components list
Screen Shot 2021-11-01 at 5.13.14 PM

Read more:

1 Like