Divi includes a large set of built-in icons, but sometimes you need your own – such as a client logo, brand icon, product icon, or custom graphic that isn’t included in Divi’s default icon set.
In this guide, I’ll show you how to add custom image icons to Divi’s module icon picker using Divi Booster. This lets you upload your icons once and reuse them across supported Divi modules, without creating a custom icon font.
Quick answer: Divi doesn’t include a built-in way to add your own image icons to the standard module icon picker, but Divi Booster adds this option. Once enabled, go to Divi → Divi Booster → Site-wide Settings → Icons, turn on Add custom icons for use in modules, upload your icon image(s), then select them from supported Divi module icon lists. This avoids the need to generate and upload a custom icon font.
The guide has been updated for Divi 5 and Divi 4.
Some Divi custom icon methods require you to create a webfont using tools such as IcoMoon or Fontello. Divi Booster uses a simpler image-based method, which is best when you want to add your own logo-style, brand, client or project-specific icons without building a full custom icon font.
How to Add Custom Icons to Divi Modules using Divi Booster
This method uses Divi Booster to add custom image icons to Divi’s module icon picker. This is usually the easiest approach to adding custom icons to your Divi site and avoids the need to compile your icons into a icon font set.
Creating your own icon set usually only makes sense if you're dealing with a lot of icons or need to be able to treat your icons as text. For most sites, though, direct image upload via Divi Booster will be quicker and easier to manage.
Once uploaded in Divi Booster, the icons can be reused across supported modules simply by selecting them from the module icon picker.
Add the Custom Icons Feature to Divi
To follow the steps below, first install Divi Booster. It adds a site-wide custom icons feature, so you can upload your own image icons once and reuse them in supported Divi modules without custom CSS or custom webfont generation. The feature works with both Divi 5 and Divi 4.
Get Divi Booster below, then follow the steps to add your icons to Divi’s module icon picker.
Once installed and activated, Divi Booster adds the custom icon controls to its settings page.
Enable Custom Icons in Divi Booster
In your WordPress dashboard, go to Divi → Divi Booster.
Open Site-wide Settings, then open Icons. Enable the option labelled Add custom icons for use in modules.
This turns on the custom icons feature and displays the upload controls for adding your own icons.
Upload Your Custom Icon Image
Click the + icon in the custom icons setting to upload a new icon image or choose an existing image from the WordPress Media Library.
Divi Booster uses images from the WordPress Media Library, so supported formats generally follow what your WordPress site allows. SVG and transparent PNG usually give the cleanest icon-style result, while JPG, JPEG, WebP and other supported image formats may also work.
If you want to use SVG icons, make sure SVG uploads are enabled, as WordPress does not allow them by default. The free SVG Support plugin works well for this.
After selecting your icon, it should appear in the Divi Booster custom icons setting.
Add More Icons or Remove Existing Ones
To add another custom icon, click the + icon again and choose another image from the Media Library.
To remove an icon, hover over it and click the trash can icon that appears over the image.
If you want to add an icon by URL instead of choosing it from the Media Library, close the Media Library popup and paste the icon URL into the URL field below the icon.
Save the Divi Booster Settings
Once you have added your custom icons, save the Divi Booster settings.
After saving, your custom icons will be added to supported Divi module icon lists. Depending on your Divi and Divi Booster versions, the icons may appear near the start of the icon picker rather than at the end.
Select Your Custom Icon in a Divi Module
Open the Divi Builder and edit the module where you want to use your custom icon.
For example, in a Blurb module, open the module settings and go to Content → Image & Icon. Enable Use Icon, then open the icon picker and select your uploaded custom icon from the list.
The exact setting name may vary slightly depending on the module, but the general process is the same: open a module that supports icons, open its icon picker, then choose your uploaded custom icon.
Style Your Custom Icons
Custom icons added with Divi Booster are image-based icons, not font icons. This means they behave slightly differently from Divi’s built-in icons.
In most modules, you can still adjust icon size and placement using Divi’s normal design settings. Background styles should also work as expected, provided your icon image has suitable transparency or spacing.
The main limitation is colour. Divi’s built-in icons are font icons, so Divi can recolour them like text. Uploaded image icons do not automatically respond to Divi’s icon colour setting in the same way.
For best results:
- use SVG where possible for sharp scaling
- use transparent PNG if SVG is not suitable
- avoid JPG for simple icons unless you do not need transparency
- crop the icon tightly to avoid uneven spacing
- use a consistent canvas size for icons in the same set
- upload the icon in the colour you want displayed on the site
If you need the same icon in multiple colours, upload a separate version for each colour.
Save and View Your Custom Icon
Once you’ve selected your custom icon in the Divi module, save the module and save the page.
Then exit the Visual Builder and check the page on the front end of your site. Your custom icon should appear in the module where you selected it.
If the icon appears in the Visual Builder but not on the live page, clear any caching plugins, Divi static CSS cache, server cache or CDN cache, then reload the page.
Troubleshooting – Divi Custom Icons Not Showing
If your custom icons don’t appear in the Divi icon picker or on the front end, check that:
- Divi Booster is installed, activated and updated.
- Add custom icons for use in modules is enabled in Divi → Divi Booster → Site-wide Settings → Icons.
- You saved the Divi Booster settings after uploading the icon.
- You are using a module that supports Divi’s standard icon picker.
- You have checked near the start of the icon list, as custom icons may appear there in newer versions.
- Any WordPress, Divi, server, CDN or performance plugin caches have been cleared.
- For SVG icons, SVG uploads are enabled on your WordPress site.
- The uploaded image format is suitable for use as an icon. For example, JPG images may work, but they do not support transparency.
Continue Customizing Your Divi Icons
Once you’ve added custom icons to Divi’s module icon lists, you may also want to:
- Add custom image icons to the Divi Social Media Follow module – useful when you want to add a social platform or brand icon that isn’t included in Divi’s default social icon list.
- Add icons to Divi Tabs module tab titles – useful for feature comparisons, pricing sections, FAQs or product information where each tab needs a visual cue.
- Add icons to Divi Accordion titles – useful when you want FAQ or collapsible content sections to be easier to scan.
- Add more social icons to the Divi header or footer – useful when you want to link to additional social platforms from your site’s global header or footer.
FAQs
Can I add custom icons to Divi without creating an icon font?
Yes. With Divi Booster, you can add custom image icons to supported Divi module icon lists without creating a webfont with tools such as IcoMoon or Fontello. Upload the icon image through WordPress, save the Divi Booster settings, then select it from the module icon picker.
Does this work with Divi 5?
Yes. Divi Booster’s custom icons feature is designed to work with both Divi 5 and Divi 4. If your icons don’t appear after updating Divi, make sure you are using the latest version of Divi Booster and clear any caches.
Is Divi Booster’s custom icon feature only for SVG icons?
No. Divi Booster uses images from the WordPress Media Library, so supported formats generally follow what your WordPress site allows. SVG and transparent PNG are usually best for icon-style graphics, but other supported formats may also work.
What is the easiest way to add a few custom icons to Divi?
If you only need to add a few brand, logo, client or project-specific icons, the easiest method is usually to upload them as image icons with Divi Booster. A custom icon-font workflow may be better for larger icon libraries, but it requires extra steps to generate and upload the font files.
Conclusion
Adding custom icons to Divi modules is a useful way to make your designs more branded, specific and reusable. With Divi Booster, you can upload your own image icons through WordPress and make them available in supported Divi module icon lists.
For best results, use SVG or transparent PNG icons where possible, though other WordPress-supported image formats may also work.
Is there another place in Divi where you’d like to use a custom icon – such as a specific module, menu item, button, header area or third-party module? Let me know in the comments and I’ll try to help.
Hi, I bought this yesterday so that I could add custom icons to my website. I've followed the instructions and when I click on my icon, it comes up with 20 different icons. Can you tell me what i'm doing wrong? Thank you.
Hi Ali, sorry you're having this issue. I've just released an update (Divi Booster 2.9.1) which I think should solve this issue. I hope it helps, but let me know if not. Thanks!
Hi Dan,
Thanks for the article for this. I have has success up to a certain point. I have added the icon into the icon list fora blurb module. However when I try to use it it is tiny compared to the Divi icons, I have used the recommended pixel sizes and have also tried manually adding it with the same outcome unfortunately.
Any help would be fantastic>
Cheers
Hey Richard, is there any chance you're able to send me a link to a page showing the problem, so that I can take a look for you? Thanks! Dan
I added an icon to Divi Booster following the instructions but see instead a string of other icons appear with my blurb. Here is a screenshot http://prntscr.com/nr2tkl
What do I need to do?
Hi Beryl, this seems to be an issue with the preview of the icon in the visual builder. It doesn't seem to affect the display of the icon on the page itself, so if you save the page and view it outside the visual builder you should see the correct icon displayed. I'm currently working on a fix for the issue and hope to have it released soon. If you have any questions about it in the meantime, please let me know. Thanks!
I have the exact same issue as Beryl. Any idea when then fix will be ready?
Hi Dean, I've just released a fix for this, in Divi Booster 2.9.1. I hope it helps but let me know if not. Thanks!
If I purchase the Divi Booster, can I add ITunes, Amazon, Spotify etc icons? And can I use the Divi Booster for my future/potential clients websites as well? Thank you
Hi Joseph, with Divi Booster you can add those three plus 250 or so other icons to the top header / footer. You'll find the feature at "Divi > Theme Customizer > Divi Booster > Social Media Icons". Your purchase is valid for use on an unlimited number of your own / clients' websites (including future / potential clients). I hope that helps, but let me know if you have any other questions. Thanks!
When i apply a colour to my icon and set an opacity in the divi builder ( a blurb section) the icon doesn't change at all.
I uploaded a black stroked png file.
What am I doing wrong?
Hi Zak, the built-in Divi icons are implemented using an "icon font" which is basically a font in which each letter is a picture. Because they are a font, they can be styled using the Divi color and opacity settings. However, when uploading images using the method I describe here you're actually uploading a png image and these don't respond to color settings applied to fonts. There isn't an easy way to change the color of a png image in CSS and I don't currently have a solution to offer you. There are some relatively new CSS features such as filters which offer a potential way of doing it, but it's not a straightforward process and I haven't had a chance to figure out how to make it work yet. If I do, I'll update here. In the meantime, the best I can suggest is to change the color / opacity of the image in an image editor (e.g. photoshop) prior to uploading. Thanks.
Cheers dan, fully understand. I've changed these in photoshop :-)
Hi Dan, I just purchased your Booster, with the hopes of accomplishing what is stated in this article. However, I've gotten this odd hover that seems to be pulling 4-5 different icons in addition to the one i created >< Any advise?
http://magicalherbal.dreamhosters.com/
(hover is on the first two products in the top row)
Also, I would like to make the icon much larger, is that possible?
Hi Kathleen, it looks like Divi made some changes which were preventing the Divi Booster feature from working correctly with the image module's hover overlay icon feature. I've fixed this in the next version of Divi Booster (2.7.3) which I'll hopefully have out soon. If you need to fix it in the meantime, you should be able to do so with this CSS:
.et_pb_image .et_pb_image_wrap .et_pb_inline_icon[data-icon^="wtfdivi014"]:before { display:none; }To make the icons bigger, you can use the following CSS:
.et_pb_image .et_pb_image_wrap .et_pb_inline_icon[data-icon^="wtfdivi014"] .db014_custom_hover_icon { max-width: 96px !important; max-height: 96px !important; }That should set them to the height of your uploaded images (i.e. 96px by 96px) rather than the 32px by 32px default used by Divi for the overlay icons.
You can add the CSS into the "Divi > Theme Options > General > Custom CSS" box. If you only want to apply the changes to certain image modules, you can give those modules a "CSS class" on the module settings "advanced" tab (for example "my-image-module-class") and then replace "et_pb_image" in the above code with that CSS class.
I hope that helps.
Anyway to change the Social Icons in the Person Module? I need Instagram to be an option. I've already change it in Theme Options and make the "Twitter" now Instagram. I had hope it would do this site wide, including modules, but no. It just did it for headers and footers. Any ideas?
Hi Kim, one option is my plugin, Divi Booster, which adds an Instagram icon option to the person module. Once installed, you'll find the "Instagram Profile Url" option just after the built in social icon options in the "Content" tab of the "Person Module Settings".
Perfect! I had read that but was unsure if it would also work on Person Modules as well as Blurbs. Thank you
You're welcome, Kim.
Note that the option added to the person modules is different to the custom icon feature discussed in this post and enabled for blurbs, buttons and the like. While for blurbs and so on you can upload any image to use as an icon, the person module only adds options for a couple of specific icons (i.e. "website" and "instagram"). Hopefully I can improve on that in the future.
Hi, is there anyway to make the icon bigger when you put it in a button?
Hi Sophie, I've just put up a quick post with a couple of options for increasing the icon size in the Divi Button module. I hope that helps!
https://divibooster.com/increasing-the-size-of-divi-button-icons/
Just added it to my site and it works perfectly. Thanks for this. I've been using the amazing Divi for a while now but only just bought your plugin. It's saving me a lot of time already as I manually had to put in a lot of css that you cover. Your support is also fantastic Dan – v.impressed with your comprehensive solution and how quick you respond (particularly with time differences as I'm guessing you're in the US and I'm in Australia!)
I'm really glad to hear you're finding the plugin useful, Sophie! I'm actually in Melbourne (well, round the bay a bit) – not sure where in Aus you are, but I we must be pretty close timezone-wise :)
I want to put the WhatsApp icon in the original version in the header of my site, but I can not.
Could you help me, please?
Hi Luiz, I'm not sure I understand what you're trying to do, sorry. I can see you've been able to add the WhatsApp icon in the top header of the site you've linked to – are you trying to do something different? Thanks!
How can i change the location second icon in mobile menu?
Hey Lawrence, where are you hoping to move the second icon to? Do you have a link to the site you're working on so that I can see how you have the menu set up at them moment? Thanks!
Hi!
I added an icon through Divi Booster following the instructions and it's not showing up in the icon set. Any thoughts?
Hi Amanda, I'm not aware of any issues that would cause this? Is there any chance I'd be able to login and take a look at what's going on? If so, can you please send me login details via the contact form. Thanks!
Hi Dan,
I bought the Divi Booster and have uploaded images to use as icons but I cannot change their colours, any thoughts please?
Hi Darren, the icons uploaded via Divi Booster are images, and unfortunately CSS doesn't offer an easy way to change the color of images. It looks like there are some possible approaches to colorizing images which I'd like to explore in the future, such as the accepted answer in this Stack Overflow post:
https://stackoverflow.com/questions/29037023/how-to-calculate-required-hue-rotate-to-generate-specific-colour
However, as you can see they are a bit involved and I haven't had the opportunity to dig into the details yet.
For now the best I can offer is to use an image editing program to create variants of the icons in the colors you want and then upload those. Sorry I can't be more helpful at the moment, but I'll update here if I'm able to come up with a decent CSS solution.