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
- \2f
- \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
- \55
- \56
- \57
- \58
- \59
- \5a
- \5b
- \5c
- \5d
- \5e
- \5f
- \60
- \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
- \e019
- \e01a
- \e01b
- \e01c
- \e01d
- \e01e
- \e01f
- \e020
- \e021
- \e022
- \e023
- \e024
- \e025
- \e026
- \e027
- \e028
- \e029
- \e02a
- \e02b
- \e02c
- \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
- \e043
- \e044
- \e045
- \e046
- \e047
- \e048
- \e049
- \e04a
- \e04b
- \e04c
- \e04d
- \e04e
- \e04f
- \e050
- \e051
- \e052
- \e053
- \e054
- \e055
- \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
- \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.