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'm having an issue where the custom icons in the Blurb module no longer are circled. Built-in icons do show circled but the custom ones don't. I've tried both png and svg custom icons.
Hey Brian, I’ve just released a fix (v3.2.6) that I think should resolve this. I hope it helps but if not, are you able to share a link to a page showing the issue? Thanks!
Hello, just downloaded Divi Booster, having the same issue with icons. Following the instructions, but it doesn't work, I do not see any of my icons added. What can I do ?
Hi Magdalena, the first thing to rule out is any caching issues – i.e. that the site is still showing an old version of the page. Try clearing any caches used on your site, and your browser cache. That should get the latest version of the page showing. If that doesn't help, is there any chance you're able to share a link to the page you're working on (either here or via the contact form)? If you can also let me know where on the page you're adding the icons (i.e. which module), that would be great. Thanks!
Hey Patrick, I can't use more than 10 icons. There are more than 10 icons displayed in the booster settings and I can also see and select them in the Blurb module, but they are then not displayed. Instead, all Divi icons are displayed at once. Can you help me? Thank you and greetings Carsten
Hey Carsten, I just ran a test with 20 custom icons and they display correctly for me. Is there any chance you're able to share a link to an example page showing the problem? There may be something going on that I'm missing. Thanks!
Hey, Dan, I am running to an issue implementing the custom icons where the icons appear to be shifted up compared to the base Divi icons. It seems to be the margin-top: -16px on the img tag in the element inspector. Any help would be appreciated.
Applying the following CSS in the "Divi>Theme Options>General>Custom CSS" appears to have resolve the issue temporarily.
img.dbdb-custom-icon-img {
margin-top: 0px;
}
Hey Matthew, I'm glad you've found a workaround. I'm not quite sure what was adding that negative margin-top. Is there any chance you're able to share a link to the page you've been working on? I'd love to take a look and see if I can figure out where it came from / how to solve it permanently. Thanks!
I tried the php solution but am just getting a group of 6 standard icons together in the blurb icon selector.
I have used this code in my child theme functions.php file:
[data-icon="myicon"]::before {
background: url('https://www.leodisdiamonds.co.uk/wp-content/themes/divi-child/icons/select_stone.svg');
content:'a' !important;
width:16px !important;
height:16px !important;
color:rgba(0,0,0,0) !important; }
jQuery('.et-pb-icon').filter(function(){ return jQuery(this).text() == 'myicon'; }).html(");
The code in the post was lagging a bit behind the code used in Divi Booster which has already been updated to address both the icon picker "6 icons" issue and to add SVG support, so I've updated the post with the code from the latest version of Divi Booster. It's quite a bit longer than the original as it handles more edge cases and does some heavy lifting to keep the visual builder preview updated. But as I say in the post, you can basically ignore all of it but the last line. Hope it helps!
Hello,
I tried the php solution, but this code add a group of 6 icons glued together (6 icons that are in the standard set already).
Could you help me to use your functions?
Caroline
Hi Caroline, probably what you're seeing is the "myicon" placeholder rendered in the standard icon divi font. This means that the javascript code added by the final PHP code is not taking effect correctly. Is there any chance you're able to point me to an example page showing the problem so that I can take a look? Thanks!
Hi, I've added svg icon with Divibooster, the icon appears in the module icon list, but when I select it's smaller than other icons (I've added svg icon at 96/96px) and not positionned as wel as other.
Hi Arno, is there any chance you're able to send me a link to the page you're working on so that I can take a look for you? If that's not possible, perhaps you can send me a screenshot? (Note: if you submit a bug report via the contact form you'll get an auto-response email to which you can attach the screenshot). Thanks!
Don't work for SVG.
Even with SVG safe plugin, i cannot change color… because is a img with Divi booster :(
Hi Funfrock, while you should be able to upload and display SVG icons, you're right – you can't change the color because the icons added via Divi Booster are image files. The built-in Divi icons are added using an icon font, which can be styled in the same way as other text fonts. But images can't be changed in the same way since they contain their own color information, for example, and CSS text colors set on them are ignored. There are some new options for changing image colors using CSS filters, but they are a bit complex (see this StackOverflow answer for example). The easier alternative, if you can use it, is to change the color of the image in an image editor, before uploading it to Divi Booster. I hope to be able to add support for color changing using CSS filters in the future. Thanks!
Hi, I was trying to ad the icons but it is show as a gray square , what could be the problem?
Hey jesus, any chance you're able to send me a link to the page you're working on so that I can take a look for you? Thanks!
Hi Dan, I just uploaded a 96X96 icon in the divi booster settings page, shows up in the blurb icon settings in the builder but when I select the new uploaded icon, it does not show up on the builder web page…what am I doing wrong….wp is up to date and divi theme as well.
I tried changing the icon color and and back ground, circle as well but still can't see it
Hi Charles, it looks like Divi has made a change which is preventing the icons from displaying in the blurb module preview. The icons should still show up correctly on the site itself (i.e. if you view / preview the page). I've had a look and there doesn't seem to be an easy way to get the icons working in the preview again, so I'll need to spend some more time on that. I'll try and get them working again as soon as I can. I hope it doesn't inconvenience you too much, and like I say, the icons should still display correctly on the site itself. If you find that isn't the case for you, please let me know. Thanks!
Hello , i am new to this so im not sure what code i should put for that "We then use CSS to set our small icon as the background for the icon selection button and use some CSS / jQuery to make it display correctly." Can you please help me sir ?
Hi maucikk, this is actually just describing what the PHP code in the "Adding Custom Blurb Icons Manually" section does. There's nothing else to add – instead, the PHP code adds the CSS and jQuery code for you. I've updated the text to hopefully make this a bit clearer. But let me know if you have any questions, etc. Thanks!
Hi – I tried this script to add a whatsapp icon for a button. The new icon appears at the end of the list correctly and has the next sequential number: %%380%%
The problem I have is that it when I select it as the button icon (left) it just displays a mess of icons over the top of the button text. Any idea what the problem is?
Hey patrick, the code above gives an example of using the icons with the Blurb module. The Button module uses different HTML and CSS and must be treated differently. I think you should be able to get your button showing just by unhiding that mess of icons (so that you can see it again) and adding this CSS to the site:
[data-icon="whatsapp-icon"]:before, [data-icon="whatsapp-icon"]:after { background: url('http://gochimor.co.za/wp-content/uploads/2019/08/whatsapp-icon-black-invert.svg') !important; content:'' !important; width:1em !important; height:1em !important; }You might still want to do a bit of tweaking to get the positioning, etc, right (let me know if you need any help), but I think that should at least get the icon showing for you.
Can I use SVG icons?
Hi Dieter, by default Wordpress doesn't support SVG icons, so initial attempts to use them to fail. However, you can enable SVG support in Wordpress with a plugin such as the free SVG Support plugin (https://wordpress.org/plugins/svg-support/). Once active you should be able to use SVG icons as your custom icons (either with the code above or with Divi Booster). I hope that helps.