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,
just thought i'd say that I made this work by doing the manual install, but I made the icon 46×46, so it fits into the circle if that is selected as an option. If you add your new icon at 96×96, is tries to put a massive circle around everything.
46x46px makes it the same size as all the other standard icons – I did have to colour it to the correct colour though.
Seems to work a treat – thanks for posting this fix.
Hey Jon, thanks for letting me know how you got on. It's useful to know that 46×46 works well with the circle – I don't normally use it with the circle and wasn't aware of that. Cheers!
Hi, using your code to add icons manually and everything went very well. It added the icon as expected, but then the site just showing the smaller version.
And yes, I did change the url to the larger image (http://static.telco.xdk.s3-eu-west-1.amazonaws.com/wp-content/uploads/2015/05/Wifi-96px.png).
Any thoughts?
Hi Marie, are you able to share a link to the page so that I can take a look?
For the life of me, I just can't get it to work. :(
Tried all sorts of things.
Hi Sidian, it looks like it's a caching issue. Something (probably a performance plugin) is stopping Divi Booster from updating its JavaScript when you change the icon settings, which means the code to display the icon correctly isn't being shown.
I've written a post on how to fix caching issues.
Also, recent version of Divi Booster are able to deal with the caching so if you upgrade Divi Booster to the latest version, I think that should also fix it.
Oh ok, I think I got it. This allows graphic icons to be added to the Blurb module? So, is there no way to add font icons into Divi that show up in the Blurb Module and can be manipulated with color etc? i.e. same type of icons that are already in the Divi Blurb Module?
Thanks much!
Hey Bob, yes that's correct – this code is for graphic icons. It should be possible to add font icons, but it's not something I've been able to explore fully yet. If / when I do I'll post an update here.
Dan, love the plugin!
Adding new blurb icons, added as 96×96 png, but when I select to place "left" the icon display size is way smaller than when I use the standard divi icons.
http://sharreid.com/test/
Any ideas?
Cheers, Reid
Hey Reid, it's actually a Divi default that the "left" icons are smaller than the "top" positioned ones. If you'd like to make the left icons bigger, I've just added an option to Divi Booster to do so, and put up a post describing how it's done:
http://divibooster.com/make-left-placed-divi-blurb-icons-larger/
Just getting into WP & Divi, and purchased Divi Booster.
I am trying to install three custom icons (I have .png and .svg files).
I made the .png files 96 x 96, and uploaded them through the Divi Booster widget. They appear as images in the media library and not blurb icons. Certainly I'm not clear as to what the proper procedure is and could use some help.
Thanks!
Robert
Hey Robert, the feature uses the media library to handle the icon upload and storage. If you go into the settings for one of your blurbs you should see the same icons available for selection as the blurb icon. They'll appear just after the built in icons. Let me know if this isn't the case.
They aren't in the icon list, but are in my media library.
Dan-
I figured it out. I cpoied the image link into the booster "upload icon" area, and it worked!
What kind of file should I upload to toggle the color (dark/light) of the icon?
Ah, I see what's happening. When you upload an icon, the media library gives you two options "Save all Changes" and "Insert into Post". It's not at all intuitive, but you should click "Insert into Post" and it'll automatically place the URL into the "upload icon" area. I'm planning on replacing this system with something more intuitive and seamless, which would also be able to handle the upload of multiple icons. Anyway, glad you got it working!
Currently it isn't possible to control the darkness / lightness of the uploaded icon (as it is an image file rather the an icon font as Divi uses). I'll look into changing this in the future.
Hello – about 1 month into Wordpress themes – have the DIVI – I'm confused when you say "add the image URL" – I only have the images on my computer… how do I get an image URL?
Thanks
Angie
Hi Angie, there are a few ways to get a URL for an image. The easiest is to upload the image to your WordPress (in the "Media > Add New" section), and then follow the instructions on this post to get the URL:
http://www.wpbeginner.com/beginners-guide/how-to-get-the-url-of-images-you-upload-in-wordpress/
Hi,
I am in the initial developing stage of creating my website. I have several icons that are in color, and I would like to change them to grey.
Does anyone have an easy fix?
Hi Elvis,
Probably the easiest way is to use an online converter such as this one:
http://www.rapidtables.com/convert/image/rgb-to-grayscale.htm
Alternatively you could use a desktop program such as GIMP or Photoshop.
Finally, if you need to, it's possible to display an image as greyscale using CSS / SVG. See this Stack Overflow question for some options on how to do this:
http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
Hope that helps!
http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css
Hi Dan, I keep getting a fatal error when I do this…any idea what my mistake is?
Fatal error: Cannot redeclare myfont_icons() (previously declared in /home/brennanwesterman/public_html/wp-content/themes/Divi/functions.php:4618) in /home/brennanwesterman/public_html/wp-content/themes/Divi/functions.php on line 4627
Thanks!
Oops, sorry Brennan. It looks like I copied the same function twice. I've updated the code, so hopefully it'll work for you now.
Dan,
I get the same error message as Brennan. "Fatal error: Cannot redeclare myfont_icons() (previously declared in /nas/wp/www/staging/kavi/wp-content/themes/Divi/functions.php:4801) in /nas/wp/www/staging/kavi/wp-content/themes/Divi/functions.php on line 4824"
Any idea why I might be getting this. I added multiple icons at the same time. Instead of naming them as "myicon" I named them each differently and made sure the names matched between both functions. Any advice is greatly appreciated.
Hi Jay, the problem in your case is that your repeating the function declarations. PHP doesn't allow two functions to have the same name. To fix this, you could add a number to the end of each function name, so your code would end up looking a bit like this:
/* First icon */ function myfont_icons1($icons) { ... } add_filter('et_pb_font_icon_symbols', 'myfont_icons1'); function my_custom_fonts1() { ... } add_action('admin_head', 'my_custom_fonts1'); /* Second icon */ function myfont_icons2($icons) { ... } add_filter('et_pb_font_icon_symbols', 'myfont_icons2'); function my_custom_fonts2() { ... } add_action('admin_head', 'my_custom_fonts2');Hope that makes sense!
Dan
Hi, just a quick note to say thanks for all your Divi articles and for the effort and time to write them. The plugin you are writing sounds like a great idea and I look forward to its completion.
Thanks Antony! I'm glad you've found them useful, and I too look forward to the completion of the plugin ;) I'm hoping to have it ready within the next week or so.
Hi dan, it`s nice to hear You work on so cool stuff. So at the moment I`m wondering, whether to focus rather on adding more text colours to the main theme UI. Like more than light and dark.
When it comes to icons i`d create new custom post type hidden in menu (or not) manageable on plugin options page, with three fields; title (name of icon) and two-sizes of images to add from media library.
Then I`d just use Your script to iterate over posts in every place needed, extracting values.
But what also concerns me – i`d so like to maintain functionality of webfonts – scalability and changing colours. Thats hard to achieve with png. Some time ago I did a project using SVG php files with parameter for fill colour, like: "my-image.php?f=AABBCC". It would be possible, but still, every image should be prepared for adding parameter.
Ooohh.. whatever, i`ve got so much to do that i don`t even know why am i still wondering about this :-)
Ha ha, sounds like we're the same – keep getting distracted by the fun stuff :)
I haven't tried myself, but it should definitely be possible to add support for other webfonts. I guess there are two options – one, you could replace the ET font with your own via CSS. But that limits you to one font and the characters chosen by ET. Another option would be to register an icon for each character in your new font, and style each one via CSS (setting the content to the character code). It should be a (fairly) simple modification of the PNG code in this post.
I'd love to see more text color options than just light and dark – it does seem a bit too few!
Thank You so much!
I am thinking of developing simple plugin allowing management of blurp icons
No problem, entio!
There's definitely a need for a plugin to allow management of the icons.
I've actually got a plugin in the pipeline which implements many of the tips I've written about on this site. One of the things I've already implemented is the ability to add new blurb icons. I'm hoping to release it in about two weeks, so if you're just after a convenient way to manage the blurb icons on your site it will save you the effort of writing the plugin yourself.
If you're planning to write the plugin for other reasons (fun, money, etc) please do come back and share a link here when it's ready. I'll also be happy to test it out for you, if you like.