Divi Icons Search

Search for Divi icons and add them to your Text module or CSS

I often use Divi icons in text modules and custom CSS. Elegant Themes already published list of their icons on their website but if you use them often, searching for your perfect icon on that long page will get on your nerves and you will waste a lot of your precious time.

This is why I created this page, where you can easly look through all icons available and also find them with search form.

Use in Text module

Every icons has its own unique code. If you want to add icon to your text module, just copy this code below (replace icon code with code of your chosen icon):

<span class='et-pb-icon'></span>

It will look like this:



You can also apply styles directly to your code. For example:

<span class='et-pb-icon' style='font-size: 20px;'></span>

This is the result:



You can apply as many styles as you need, just separate them with semicolon (;).

Use in CSS

You can also add icons to you CSS code as pseudo elements (::before, ::after).

So for example, if you have a text link with class 'icon-text':

<a href='#' class='icon-text'>Link</a>

Pick your icon and take a look at its code. They all start with &#x. Everything after that is what you will need for your CSS.

If we take a look at our mug icon, we can se that after &#x comes 'e105'.

Make sure you add backslash (\) before!

This is example of your CSS code:

.icon-text:before {
   content: '\e105';
   font-family: 'ETmodules";
}

And this is your end result:

Link

You can play around and add more styles, like margin, padding, change color etc.

You don't need to import icons, they are already included in your Divi theme.