{"id":31633,"date":"2023-07-29T07:28:19","date_gmt":"2023-07-29T05:28:19","guid":{"rendered":"https:\/\/www.markhendriksen.com\/?p=31633"},"modified":"2023-07-31T09:17:34","modified_gmt":"2023-07-31T07:17:34","slug":"step-by-step-guide-for-divi-icons","status":"publish","type":"post","link":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/","title":{"rendered":"Step-by-Step Guide for Divi Icons"},"content":{"rendered":"\n<p><strong>Divi Icons<\/strong> are a great way to add visual interest and improve the readability of your website. They can be used to represent different types of content, such as calls to action, social media icons, and product categories. In this article, I will show you how to use Divi Icons to improve your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Table of Contents<\/h3>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><a href=\"#types-divi-icons\">The different types of Divi icons that are available<\/a><\/li><li><a href=\"#how-to-use-divi-icons\">How to use icons in the Divi Builder<\/a><\/li><li><a href=\"#style-divi-icons\">How to style Divi icons<\/a><\/li><li><a href=\"#find-more-divi-icons\">Where to find more Divi icons<\/a><\/li><li><a href=\"#add-custom-divi-icons\">How to add custom icons to Divi<\/a><\/li><li><a href=\"#improve-readability\">How to use Divi icons to improve the readability of your website<\/a><\/li><\/ul>\n\n\n\n<p>I hope that this guide will help you to use Divi Icons to create a more visually appealing and user-friendly website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"types-divi-icons\">The different types of Divi icons that are available<\/h2>\n\n\n\n<p>Divi comes with four different types of icons:<\/p>\n\n\n\n<p><strong>Solid icons:<\/strong> These are the most basic type of Divi icons. They are simple, black-and-white icons that are perfect for a minimalist design.<\/p>\n\n\n\n<p><strong>Line icons:<\/strong> These icons are made up of thin lines. They are a bit more visually interesting than solid icons, but they are still relatively simple.<\/p>\n\n\n\n<p><strong>Divi icons:<\/strong> These icons are designed specifically for the Divi theme. They are a bit more complex than solid or line icons, but they still retain a clean and modern look.<\/p>\n\n\n\n<p><strong>Font Awesome icons:<\/strong> Font Awesome is a popular icon library that can be used with Divi. This library includes a wide variety of icons, from simple to complex.<\/p>\n\n\n\n<p>In addition to these four types of icons, Divi also allows you to upload your own custom icons. This gives you the ultimate flexibility in choosing the icons that you want to use on your website.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">A list of all the Divi icons available<\/h3>\n\n\n\n<p>The easiest way to preview a Divi icon is by going into a Divi module with an icon option such as a blurb module or the Icon module.<\/p>\n\n\n\n<p>Under the icon tab, you can use the filter options to select a certain icon type. In the search bar, you can type an icon name and it will filter for it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"654\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Search-for-a-Divi-icon.jpg\" alt=\"Search for a Divi icon\" class=\"wp-image-31635\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Search-for-a-Divi-icon.jpg 626w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Search-for-a-Divi-icon-380x397.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Search-for-a-Divi-icon-287x300.jpg 287w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Search-for-a-Divi-icon-510x533.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Search-for-a-Divi-icon-57x60.jpg 57w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Search-for-a-Divi-icon-86x90.jpg 86w\" sizes=\"(max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<p>Here is a full list of all the <a href=\"https:\/\/www.markhendriksen.com\/full-list-of-all-divi-icon-codes\/\">Divi icon codes<\/a> available.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"how-to-use-divi-icons\">How to use icons in the Divi Builder<\/h2>\n\n\n\n<p>To use icons in the <a href=\"https:\/\/www.markhendriksen.com\/divi-builder-plugin-review-by-elegant-themes\/\">Divi Builder<\/a>, you can use the <strong>Icon<\/strong> module (this is a new module in Divi and you can now place an icon anywhere on your website instead of using an icon code with CSS). This module allows you to choose from a variety of icons, including solid icons, line icons, Divi icons, and <a href=\"https:\/\/www.markhendriksen.com\/how-to-add-font-awesome-to-divi\/\">Font Awesome<\/a> icons. You can also customize the icon font size, color, and alignment of the icon.<\/p>\n\n\n\n<p>To add an icon to your Divi website, follow these steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Open the Divi Builder and edit the page or post where you want to add the icon.<\/li><li>Click the <strong>+<\/strong> icon to add a new module.<\/li><li>Select the <strong>Icon<\/strong> module from the list.<\/li><li>Choose the icon that you want to use from the <strong>Icon<\/strong> dropdown menu.<\/li><li>Adjust the size, color, and alignment of the icon as desired.<\/li><li>Click the <strong>Save<\/strong> button to save your changes.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"416\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Add-a-icon-module.jpg\" alt=\"Add a icon module\" class=\"wp-image-31636\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Add-a-icon-module.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Add-a-icon-module-380x232.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Add-a-icon-module-300x184.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Add-a-icon-module-510x312.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Add-a-icon-module-98x60.jpg 98w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Add-a-icon-module-147x90.jpg 147w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"style-divi-icons\">How to style Divi icons<\/h2>\n\n\n\n<p>Divi icons can be styled in a variety of ways. You can change the size, color, alignment, and border of the icon. You can also add a background color or image to the icon.<\/p>\n\n\n\n<p>To style a Divi icon, you can use the Icon module settings. These settings are located in the Design tab of the module.<\/p>\n\n\n\n<p>Here are some of the settings that you can use to style Divi icons:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Size:<\/strong> This setting allows you to change the size of the icon.<\/li><li><strong>Color: <\/strong>This setting allows you to change the color of the icon.<\/li><li><strong>Alignment:<\/strong> This setting allows you to align the icon to the left, center, or right.<\/li><li><strong>Border:<\/strong> This setting allows you to add a border to the icon.<\/li><li><strong>Background:<\/strong> This setting allows you to add a background color or image to the icon.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"544\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Customize-a-Divi-icon.jpg\" alt=\"Customize a Divi icon\" class=\"wp-image-31637\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Customize-a-Divi-icon.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Customize-a-Divi-icon-380x304.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Customize-a-Divi-icon-300x240.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Customize-a-Divi-icon-510x408.jpg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Customize-a-Divi-icon-75x60.jpg 75w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Customize-a-Divi-icon-113x90.jpg 113w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p>You can also use custom CSS to style Divi icons. This gives you more control over the look and feel of the icons.<\/p>\n\n\n\n<p>Here is an example of how to use custom CSS to style a Divi icon:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>.et-pb-icon {\n  color: #ffffff;\n  background-color: #000000;\n  border-radius: 5px;\n}<\/code><\/pre>\n\n\n\n<p>This CSS code will change the color of the icon to white, the background color to black, and the border-radius to 5px.<\/p>\n\n\n\n<p>If you want to style the Divi icon further with CSS I do recommend adding an additional CSS class to the module. You can do that in the CSS class field under the Advanced tab of the module.<\/p>\n\n\n\n<p>The code will then look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code has-small-font-size\"><code>.my-css-class .et-pb-icon {\n  color: #ffffff;\n  background-color: #000000;\n  border-radius: 5px;\n}<\/code><\/pre>\n\n\n\n<p>You can add CSS code in Divi &gt; Theme Options &gt; CSS or in a <a href=\"https:\/\/www.markhendriksen.com\/divi-child-theme-essential-guide\/\">Divi child theme<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"find-more-divi-icons\">Where to find more Divi icons<\/h2>\n\n\n\n<p>There are a number of places where you can find more Divi icons. Here are a few of the most popular sources:<\/p>\n\n\n\n<p><strong>Free icon websites:<\/strong> There are a number of websites that offer free icons that you can use with Divi. Some popular free icon websites include:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>The Noun Project:<\/strong> <a href=\"https:\/\/thenounproject.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Noun Project<\/a> is a community-driven icon library that includes a wide variety of icons that are designed to be clear and concise.<\/li><li><strong>Iconfinder:<\/strong> <a href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Iconfinder<\/a> is a website that allows you to search for and download icons from a variety of sources.<\/li><li><strong>The Pictogrammers:<\/strong> <a href=\"https:\/\/pictogrammers.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Pictogrammers<\/a> is a premium icon library that includes a wide variety of icons that are designed to follow the Material Design guidelines.<\/li><\/ul>\n\n\n\n<p><strong>Premium icon websites:<\/strong> There are also a number of premium icon websites that offer a wider variety of icons than free websites. Some popular premium icon websites include:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Iconmonstr:<\/strong> <a href=\"https:\/\/iconmonstr.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Iconmonstr<\/a> is a premium icon library that includes a wide variety of icons that are designed to be simple and easy to use.<\/li><li><strong>Ionicons:<\/strong> <a href=\"https:\/\/ionic.io\/ionicons\" target=\"_blank\" rel=\"noreferrer noopener\">Ionicons<\/a> is a premium icon library that includes a wide variety of icons that are designed to be used on mobile devices.<\/li><\/ul>\n\n\n\n<p>Premium <a href=\"https:\/\/www.markhendriksen.com\/best-divi-plugins\/\">Divi plugins:<\/a> There are also some premium Divi plugins available on Elegant Themes that include extra icons for Divi.<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>WP and Divi Icons Pro:<\/strong> This is a premium plugin for Divi that adds over 3400 extra icons in 11 different styles it also includes uniquely designed icon packs. This plugin is available on Elegant Themes Marketplace.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-custom-divi-icons\">How to add custom icons to Divi<\/h2>\n\n\n\n<p>There are a number of plugins that allow you to add custom Divi icons. Here are a few of the most popular plugins:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>WP and Divi Icons Pro:<\/strong> This plugin includes a large library of custom icons that you can use with Divi. It also allows you to import custom icons<\/li><li><strong>Divi Booster:<\/strong> This plugin includes a number of features for adding custom icons to Divi, including the ability to upload your own icons.<\/li><\/ul>\n\n\n\n<p>To add custom icons with a plugin, you will need to install and activate the plugin. Once the plugin is activated, you will be able to add custom icons to your <a href=\"https:\/\/www.markhendriksen.com\/how-to-make-a-website-with-wordpress-and-divi-theme\/\">Divi website<\/a> using the Icon module.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">WP and Divi Icons Pro<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"570\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-1024x570.jpg\" alt=\"WP &amp; Divi icons pro\" class=\"wp-image-31638\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-1024x570.jpg 1024w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-380x212.jpg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-680x379.jpg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-300x167.jpg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-768x428.jpg 768w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-108x60.jpg 108w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro-162x90.jpg 162w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/WP-Divi-icons-pro.jpg 1428w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44891&amp;url=80633\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP and Divi Icons Pro<\/a> is a plugin that adds over 3400 additional icons to WordPress and Gutenberg. You can use these icons in pages, posts, and anywhere text can be added. The plugin includes Font Awesome, Material Design, and custom icon packs designed in-house. You can also import your own custom font icons.<\/p>\n\n\n\n<p><strong>Features<\/strong><\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Over 3400 icons:<\/strong> The plugin includes over 3400 icons in 11 different styles.<\/li><li><strong>Custom icon packs:<\/strong> You can also import your own custom font icons.<\/li><li><strong>Multi-color icons:<\/strong> You can customize multi-color icons with a visual preview and add up to 3 colors.<\/li><li><strong>Divi modules integration:<\/strong> The plugin integrates with <a href=\"https:\/\/www.markhendriksen.com\/divi-modules-guide\/\">Divi modules<\/a>, so you can insert icons from the blurb, icon, and button modules or add them with the text editor.<\/li><li><strong>Icon Gutenberg block:<\/strong> The plugin also adds a custom Icon Gutenberg block.<\/li><li><strong>User-friendly interface:<\/strong> The plugin has a user-friendly interface that makes it easy to add icons to your pages and posts.<\/li><\/ul>\n\n\n\n<p><strong>Benefits<\/strong><\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Increased engagement:<\/strong> Icons can help to increase engagement on your pages and posts by making them more visually appealing.<\/li><li><strong>Better branding:<\/strong> You can use icons to add your branding to your pages and posts.<\/li><li><strong>More customization options:<\/strong> The plugin gives you more customization options for your icons, such as the ability to change the color and size of icons.<\/li><\/ul>\n\n\n<div class=\"gb-container gb-container-cbdc754c\">\n\n<a class=\"gb-button gb-button-4e5936da gb-button-text\" href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=44891&amp;url=80633\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">See demo<\/a>\n\n<\/div>\n\n\n<h3 class=\"wp-block-heading\">Divi Booster<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"380\" src=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/image-7.jpeg\" alt=\"Divi Booster\" class=\"wp-image-27545\" srcset=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/image-7.jpeg 680w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/image-7-380x212.jpeg 380w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/image-7-300x168.jpeg 300w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/image-7-510x285.jpeg 510w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/image-7-107x60.jpeg 107w, https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/01\/image-7-161x90.jpeg 161w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/divibooster.com\/ref\/403\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Divi Booster<\/a> is a plugin that adds more icons to the list of built-in icons in Divi. This makes it easy to use icons in your modules, without having to upload the image each time you want to use it. The icons will be available in modules that normally have the option to add an icon, such as the blurb and button modules.<\/p>\n\n\n\n<p>Here are some of the benefits of using Divi Booster:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Increased flexibility:<\/strong> <a href=\"https:\/\/www.markhendriksen.com\/divi-booster-plugin-review\/\">Divi Booster<\/a> gives you more flexibility when using icons in your modules. You can choose from a wider variety of icons, and you can also customize the size and color of all the icons.<\/li><li><strong>Improved efficiency:<\/strong> Divi Booster saves you time by eliminating the need to upload icons each time you want to use them.<\/li><li><strong>Enhanced branding:<\/strong> You can use icons to add your branding to your modules. This can help to make your modules more visually appealing and memorable.<\/li><\/ul>\n\n\n<div class=\"gb-container gb-container-b516bbca\">\n\n<a class=\"gb-button gb-button-9028e339 gb-button-text\" href=\"https:\/\/divibooster.com\/ref\/403\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">See demo<\/a>\n\n<\/div>\n\n\n<h4 class=\"gb-headline gb-headline-73bb514f gb-headline-text\"><strong>How to use Divi Booster<\/strong><\/h4>\n\n\n\n<p>To use Divi Booster, you first need to install and activate the plugin. Once the plugin is activated, you can go to the Divi Booster settings page and add new icons. You can add icons from a variety of sources, including Font Awesome, Material Design, and custom icon packs.<\/p>\n\n\n\n<p>Once you have added the icons, you can use them in your modules. To do this, simply select the icon you want to use from the icon selector. The icon will then be added to your module.<\/p>\n\n\n\n<p>The plugin is easy to use and includes a wide variety of icons to choose from. If you are looking for a way to add icons to your Divi modules, then Divi Booster is a great option.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"improve-readability\">How to use Divi icons to improve the readability of your website<\/h2>\n\n\n\n<p>Icons can be a great way to improve the readability of your website. They can be used to:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Break up large blocks of text:<\/strong> Icons can be used to break up large blocks of text, making it easier for users to scan and digest the information.<\/li><li><strong>Highlight important information:<\/strong> Icons can be used to highlight important information, such as call-to-action buttons or contact information.<\/li><li><strong>Provide visual cues:<\/strong> Icons can be used to provide visual cues, such as indicating the status of a process or the type of content that is being displayed.<\/li><\/ul>\n\n\n\n<p>When using icons to improve the readability of your website, it is important to:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Use clear and concise icons:<\/strong> The icons that you use should be clear and concise so that users can easily understand their meaning.<\/li><li><strong>Use icons consistently:<\/strong> The icons that you use should be used consistently throughout your website so that users can develop a familiarity with them.<\/li><li><strong>Don&#8217;t overuse icons:<\/strong> Icons should be used sparingly so that they don&#8217;t become overwhelming or distracting.<\/li><\/ul>\n\n\n\n<p>By following these tips, you can use icons to improve the readability of your website and make it easier for users to find the information that they are looking for.<\/p>\n\n\n\n<p>Here are some additional tips for using icons to improve the readability of your website:<\/p>\n\n\n\n<ul class=\"listsquare listsquare-single wp-block-list\"><li><strong>Use icons that are relevant to your website content.<\/strong> This will help users to understand the meaning of the icons and how they relate to the content.<\/li><li><strong>Place icons in a logical location.<\/strong> Icons should be placed in a location where they are easy to see and understand. For example, you might place an icon next to a <a href=\"https:\/\/www.markhendriksen.com\/create-call-action-button-menu\/\">call to action button<\/a> to indicate what the button does.<\/li><li><strong>Use a consistent size and style for your icons.<\/strong> This will help to create a cohesive look and feel for your website.<\/li><li><strong>Test your icons on different devices and screen sizes.<\/strong> Make sure that your icons look good and are readable on all devices.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Divi Icons are a great way to add visual interest and improve the readability of your website. They are easy to use and can be customized to fit your specific needs. There are a variety of Divi icons available, so you can find the perfect ones for your website. Divi Icons can help to improve the readability of your website by making your content more scannable and visually appealing.<\/p>\n\n\n\n<p>If you have any questions please let me know in the comments below.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">You might also like<\/h3>\n\n\n\n<ul class=\"wp-block-list\" id=\"listsquare-listsquare-single\"><li><a href=\"https:\/\/www.markhendriksen.com\/full-list-of-all-divi-icon-codes\/\">Full List Of All Divi Icon Codes<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/how-to-add-icons-in-your-divi-menu\">How to add icons to your Divi menu<\/a><\/li><li><a href=\"https:\/\/www.markhendriksen.com\/how-to-add-social-icons-in-the-divi-header\/\">How to Add Social Icons in the Divi Header<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Divi Icons are a great way to add visual interest and improve the readability of your website. They can be used to represent different types of content, such as calls to action, social media icons, and product categories. In this article, I will show you how to use Divi Icons to improve your website. Table [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":31644,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-31633","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Step-by-Step Guide to Using Divi Icons to Improve Your Website<\/title>\n<meta name=\"description\" content=\"Learn how to use Divi Icons to add visual interest and improve the readability of your website. This guide covers everything from the different types of Divi icons to how to style and add custom icons.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Step-by-Step Guide to Using Divi Icons to Improve Your Website\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Divi Icons to add visual interest and improve the readability of your website. This guide covers everything from the different types of Divi icons to how to style and add custom icons.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/\" \/>\n<meta property=\"og:site_name\" content=\"Mark Hendriksen\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/madebymarkhendriksen\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-29T05:28:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-31T07:17:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Mark Hendriksen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mark Hendriksen\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/\"},\"author\":{\"name\":\"Mark Hendriksen\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\"},\"headline\":\"Step-by-Step Guide for Divi Icons\",\"datePublished\":\"2023-07-29T05:28:19+00:00\",\"dateModified\":\"2023-07-31T07:17:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/\"},\"wordCount\":2122,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg\",\"articleSection\":[\"Divi tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/\",\"url\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/\",\"name\":\"Step-by-Step Guide to Using Divi Icons to Improve Your Website\",\"isPartOf\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg\",\"datePublished\":\"2023-07-29T05:28:19+00:00\",\"dateModified\":\"2023-07-31T07:17:34+00:00\",\"description\":\"Learn how to use Divi Icons to add visual interest and improve the readability of your website. This guide covers everything from the different types of Divi icons to how to style and add custom icons.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Guide for Divi icons\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markhendriksen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi tutorials\",\"item\":\"https:\/\/www.markhendriksen.com\/divi-tutorials\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Step-by-Step Guide for Divi Icons\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markhendriksen.com\/#website\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"name\":\"Mark Hendriksen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markhendriksen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.markhendriksen.com\/#organization\",\"name\":\"Mark Hendriksen\",\"url\":\"https:\/\/www.markhendriksen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"contentUrl\":\"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png\",\"width\":354,\"height\":40,\"caption\":\"Mark Hendriksen\"},\"image\":{\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/madebymarkhendriksen\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765\",\"name\":\"Mark Hendriksen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g\",\"caption\":\"Mark Hendriksen\"},\"url\":\"https:\/\/www.markhendriksen.com\/author\/twopixels\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Step-by-Step Guide to Using Divi Icons to Improve Your Website","description":"Learn how to use Divi Icons to add visual interest and improve the readability of your website. This guide covers everything from the different types of Divi icons to how to style and add custom icons.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/","og_locale":"en_US","og_type":"article","og_title":"Step-by-Step Guide to Using Divi Icons to Improve Your Website","og_description":"Learn how to use Divi Icons to add visual interest and improve the readability of your website. This guide covers everything from the different types of Divi icons to how to style and add custom icons.","og_url":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/","og_site_name":"Mark Hendriksen","article_publisher":"https:\/\/www.facebook.com\/madebymarkhendriksen","article_published_time":"2023-07-29T05:28:19+00:00","article_modified_time":"2023-07-31T07:17:34+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg","type":"image\/jpeg"}],"author":"Mark Hendriksen","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mark Hendriksen","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#article","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/"},"author":{"name":"Mark Hendriksen","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765"},"headline":"Step-by-Step Guide for Divi Icons","datePublished":"2023-07-29T05:28:19+00:00","dateModified":"2023-07-31T07:17:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/"},"wordCount":2122,"commentCount":0,"publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"image":{"@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg","articleSection":["Divi tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/","url":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/","name":"Step-by-Step Guide to Using Divi Icons to Improve Your Website","isPartOf":{"@id":"https:\/\/www.markhendriksen.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage"},"image":{"@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg","datePublished":"2023-07-29T05:28:19+00:00","dateModified":"2023-07-31T07:17:34+00:00","description":"Learn how to use Divi Icons to add visual interest and improve the readability of your website. This guide covers everything from the different types of Divi icons to how to style and add custom icons.","breadcrumb":{"@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#primaryimage","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2023\/07\/Guide-for-Divi-icons.jpg","width":1200,"height":630,"caption":"Guide for Divi icons"},{"@type":"BreadcrumbList","@id":"https:\/\/www.markhendriksen.com\/step-by-step-guide-for-divi-icons\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markhendriksen.com\/"},{"@type":"ListItem","position":2,"name":"Divi tutorials","item":"https:\/\/www.markhendriksen.com\/divi-tutorials\/"},{"@type":"ListItem","position":3,"name":"Step-by-Step Guide for Divi Icons"}]},{"@type":"WebSite","@id":"https:\/\/www.markhendriksen.com\/#website","url":"https:\/\/www.markhendriksen.com\/","name":"Mark Hendriksen","description":"","publisher":{"@id":"https:\/\/www.markhendriksen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markhendriksen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.markhendriksen.com\/#organization","name":"Mark Hendriksen","url":"https:\/\/www.markhendriksen.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","contentUrl":"https:\/\/www.markhendriksen.com\/wp-content\/uploads\/2021\/01\/Mark-Hendriksen-Logo.png","width":354,"height":40,"caption":"Mark Hendriksen"},"image":{"@id":"https:\/\/www.markhendriksen.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/madebymarkhendriksen"]},{"@type":"Person","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/d40c4ac37512479c71b48ad2879fb765","name":"Mark Hendriksen","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.markhendriksen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1416c89ed4da57b902960a21b7fa25cb91558d39eff48c8b5017bd4c9bcc59a9?s=96&d=mm&r=g","caption":"Mark Hendriksen"},"url":"https:\/\/www.markhendriksen.com\/author\/twopixels\/"}]}},"_links":{"self":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/31633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/comments?post=31633"}],"version-history":[{"count":3,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/31633\/revisions"}],"predecessor-version":[{"id":31716,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/posts\/31633\/revisions\/31716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media\/31644"}],"wp:attachment":[{"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/media?parent=31633"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/categories?post=31633"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markhendriksen.com\/wp-json\/wp\/v2\/tags?post=31633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}