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:
- head to our upload page
- drag and drop the file or click to choose your icon file ot upload, this will upload it to our servers and generate a unique permanent URL , click on it to copy
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
Read more: