# How to give my custom components an icon image?

**URL:** <https://forum.builder.io/t/how-to-give-my-custom-components-an-icon-image/1283>\
**Category:** Technical Questions\
**Tags:** visual-editor\
**Created:** [November 2, 2021, 12:10am UTC](https://forum.builder.io/t/how-to-give-my-custom-components-an-icon-image/1283 "2021-11-02T00:10:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![aziz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/aziz/32/2551_2.png) [@aziz](https://forum.builder.io/u/aziz)\
**Post date:** [November 2, 2021, 12:10am UTC](https://forum.builder.io/t/how-to-give-my-custom-components-an-icon-image/1283/1 "2021-11-02T00:10:32Z")

</div>

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](http://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](https://builder.io/upload) ![Screen Shot 2021-11-01 at 4.54.17 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/e548521f3290e78390ebe2dc16685410f575cc15.png)
- 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 ![Screen Shot 2021-11-01 at 4.56.28 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/4893b184aaea1210c1a26d256cd31ec8d1e70554.png)

##### 2. Use a public Icon library

There are multiple available online, each has their own license, you can buy premium ones on [Themeforest](https://graphicriver.net/icons/web) or any graphic assets marketplace, or use an open source one like [css.gg](https://github.com/astrit/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

```auto
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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/1X/cd34690ed671035f0d7ec6a0d821f52bd76fa644.png)

Read more:

- [Registering Custom Components](https://www.builder.io/c/docs/custom-react-components)
- [React design system example code](https://github.com/BuilderIO/builder/tree/main/examples/react-design-system)