Adding Custom Icons to Divi

This post may contain referral links which may earn a commission for this site

The Divi Theme comes pre-packaged with a selection of icons which can be used with modules such as the blurb module. These icons are "font-icons" provided by Elegant Themes and there is no inbuilt way to add new fonts. Fortunately, there is a way we can work around this to add our own custom icons.

Adding Custom Icons using Divi Booster

My Divi Booster plugin lets you add new icons to the list of built-in icons. This makes them easily available to your modules, with no need to upload the image each time you want to use it. The icons will be available in modules which normally have the option to add an icon, such as the blurb and button modules.

To add custom icons using Divi Booster:

  1. Go to the Divi Booster settings page, then under "Site-wide Settings > Icons > Add custom icons for use in modules" you'll see the option to upload a blurb icon.
  2. Click on "Choose Image" then select the icon you want from the media library (or upload a new one) and then click "Use Image".
  3. Finally save the Divi Booster settings and your icon will now be available to you in the modules icon list.

There isn't a limit on how many icons you can add. However, there is a bit trick to it. You can currently only add one image at a time. When you save the settings, another upload box will appear so you can add another icon. So just save after you upload each icon and you can add as many as you like, e.g.:

In this way, you can add as many icons as you like.

To get rid of an icon, click on the little "X" next to the icon you would like to remove.

Adding Custom Blurb Icons in Divi

It is now possible to add blurb icons directly in Divi, by going into the settings for your blurb module settings and setting "Use Icon" to "No" and then selecting an image to display with your blurb, like so:

Note that the Divi option lets you upload a custom icon to a single blurb module. Note that this is differs from the Divi Booster option which lets you add icons to the icon list (and which are therefore available to all your blurb modules). Depending on your needs one or the other of these may suit you better.

Adding Custom Blurb Icons Manually

First, create two versions of the icon you wish to add – one 96×96 pixels in size, and one 16×16 pixels in size.

Now we'll add the smaller of the two pixels into the icon selection box shown in module settings. The following should be added into the Divi theme's functions.php file (or, better yet, in the functions.php file of a child theme):

Change the image url to that of your icon. This creates a new icon (which I've called "myicon") and adds it to the list of icons. It then adds some CSS to the admin area to set the small icon as the background for the icon selection button and uses some CSS / jQuery to make it display correctly.

If you now go into the blurb module settings you should see something like this:

custom divi icons 2

 

Notice that the final icon is now our little angry bird icon.

Select the new icon and save the blurb module. Now view the page with your blurb module. If all goes well, you should see your new icon, like so:

custom divi icons

Hundreds of new features for Divi
in one easy-to-use plugin

128 Comments

  1. 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

    Reply
    • 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!

      Reply
  2. 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.

    Reply
    • 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!

      Reply
  3. Don't work for SVG.
    Even with SVG safe plugin, i cannot change color… because is a img with Divi booster 🙁

    Reply
    • 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!

      Reply
  4. Hi, I was trying to ad the icons but it is show as a gray square , what could be the problem?

    Reply
    • 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!

      Reply
  5. 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

    Reply
    • 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!

      Reply
  6. 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 ?

    Reply
    • 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!

      Reply
  7. 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?

    Reply
    • 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.

      Reply
  8. Can I use SVG icons?

    Reply
    • 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.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *