Divi Icon Codes

Divi by Elegant Themes has a library of 350+ icons in a form of a Font Family called ‘ETmodules’.

Below you can find the list of Divi Icons together with the CSS Uncode Codes, and a code editor where you can test the icons

If you need help, below the Codes is a short tutorial on how to use them.

Try changing the `content:"\4e";`value in the editor below

Here is our Icon

Divi icons are usually used as pseude CSS elements such as :before and :after.
You can use them in the Free-Form CSS or Module Elements sub-tabs in your Advanced tab of your modules.
Or, if you wish to be more specific, you can use Custom CSS field under the Divi Theme Options, or in your Divi Child Theme.

Above on the page, in our code editor you can see minimal necessary CSS rules in order for icons to work.
But, if you're doing everything by the book of Divi, here is a full set of rules that should be assigned:

content: "";
font-family: ETmodules!important;
speak: none;
font-style: normal;
font-weight: 400;
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 0 0;
direction: ltr;

Need Help?

If you need any help or guidance, feel free to send me a message, and I will be more than happy to help.