Use promo code s-welcome to save 30% for the first month of your maintenance.

Get Started
Tools

Divi Icons
CSS 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.

  • \21
  • \22
  • \23
  • \24
  • \25
  • \26
  • \27
  • \28
  • \29
  • \2a
  • \2b
  • \2c
  • \2d
  • \2e
  • \2f
  • \30
  • \31
  • \32
  • \33
  • \34
  • \35
  • \36
  • \37
  • \38
  • \39
  • \3a
  • \3b
  • \3c
  • \3d
  • \3e
  • \3f
  • \40
  • \41
  • \42
  • \43
  • \44
  • \45
  • \46
  • \47
  • \48
  • \49
  • \4a
  • \4b
  • \4c
  • \4d
  • \4e
  • \4f
  • \50
  • \51
  • \52
  • \53
  • \54
  • \56
  • \57
  • \58
  • \59
  • \5a
  • \5b
  • \5c
  • \5d
  • \5e
  • \5f
  • \60
  • \61
  • \62
  • \63
  • \64
  • \65
  • \66
  • \67
  • \68
  • \69
  • \6a
  • \6b
  • \6c
  • \6d
  • \6e
  • \6f
  • \70
  • \71
  • \72
  • \73
  • \74
  • \75
  • \76
  • \77
  • \78
  • \79
  • \7a
  • \7b
  • \7c
  • \7d
  • \7e
  • \e00
  • \e001
  • \e002
  • \e003
  • \e004
  • \e005
  • \e006
  • \e007
  • \e008
  • \e009
  • \e00a
  • \e00b
  • \e00c
  • \e00d
  • \e00e
  • \e00f
  • \e010
  • \e011
  • \e012
  • \e013
  • \e014
  • \e015
  • \e016
  • \e017
  • \e018
  • \e019
  • \e01a
  • \e01b
  • \e01c
  • \e01d
  • \e01e
  • \e01f
  • \e020
  • \e021
  • \e022
  • \e023
  • \e024
  • \e025
  • \e026
  • \e027
  • \e028
  • \e029
  • \e02a
  • \e02d
  • \e02e
  • \e02f
  • \e030
  • \e103
  • \e0ee
  • \e0ef
  • \e0e8
  • \e0ea
  • \e101
  • \e107
  • \e105
  • \e0ed
  • \e100
  • \e104
  • \e0e9
  • \e109
  • \e0ec
  • \e0fe
  • \e0f6
  • \e0fb
  • \e0e2
  • \e0e3
  • \e0f5
  • \e0e1
  • \e0ff
  • \e031
  • \e032
  • \e033
  • \e034
  • \e035
  • \e036
  • \e037
  • \e038
  • \e039
  • \e03a
  • \e03b
  • \e03c
  • \e03d
  • \e03e
  • \e03f
  • \e040
  • \e041
  • \e042
  • \e043
  • \e044
  • \e045
  • \e046
  • \e047
  • \e048
  • \e049
  • \e04a
  • \e04b
  • \e04c
  • \e04d
  • \e04e
  • \e04f
  • \e050
  • \e051
  • \e052
  • \e053
  • \e054
  • \e055
  • \e056
  • \e057
  • \e058
  • \e059
  • \e05a
  • \e05b
  • \e05c
  • \e05d
  • \e05e
  • \e05f
  • \e060
  • \e061
  • \e062
  • \e063
  • \e064
  • \e065
  • \e066
  • \e067
  • \e068
  • \e069
  • \e06a
  • \e06b
  • \e06c
  • \e06d
  • \e06e
  • \e06f
  • \e070
  • \e071
  • \e072
  • \e073
  • \e074
  • \e075
  • \e076
  • \e077
  • \e078
  • \e079
  • \e07a
  • \e07b
  • \e07c
  • \e07d
  • \e07e
  • \e07f
  • \e080
  • \e081
  • \e082
  • \e083
  • \e084
  • \e085
  • \e086
  • \e087
  • \e088
  • \e089
  • \e08a
  • \e08b
  • \e08c
  • \e08d
  • \e08e
  • \e08f
  • \e090
  • \e091
  • \e092
  • \e0e7
  • \e0f8
  • \e0fa
  • \e0fd
  • \e0e4
  • \e0e5
  • \e0f7
  • \e0e0
  • \e0fc
  • \e0f9
  • \e0dd
  • \e0f1
  • \e0dc
  • \e0f3
  • \e0d8
  • \e0db
  • \e0f0
  • \e0df
  • \e0f2
  • \e0f4
  • \e0d9
  • \e0da
  • \e0de
  • \e0e6

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

Here is our Icon

Divi icons are usually used as pseudo 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 with a
Divi website?

If you have a question about an existing Divi website,
or you need help building a new one, fill out the form, and we will get back to you shortly.

Please enable JavaScript in your browser to complete this form.