{"id":1992,"date":"2020-01-02T16:41:08","date_gmt":"2020-01-02T16:41:08","guid":{"rendered":"https:\/\/www.kadenceblocks.com\/?post_type=ht_kb&#038;p=1992"},"modified":"2025-07-11T19:51:10","modified_gmt":"2025-07-11T19:51:10","password":"","slug":"custom-icons","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/custom-icons\/","title":{"rendered":"Using Custom SVG Icons with Kadence Blocks Pro"},"content":{"rendered":"<style>.wp-block-kadence-advancedheading.kt-adv-heading1992_c2662e-d8, .wp-block-kadence-advancedheading.kt-adv-heading1992_c2662e-d8[data-kb-block=\"kb-adv-heading1992_c2662e-d8\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1992_c2662e-d8 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1992_c2662e-d8[data-kb-block=\"kb-adv-heading1992_c2662e-d8\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1992_c2662e-d8 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1992_c2662e-d8[data-kb-block=\"kb-adv-heading1992_c2662e-d8\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading1992_c2662e-d8 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1992_c2662e-d8\"><strong>Kadence<\/strong> <strong>Blocks<\/strong> <strong>Pro<\/strong> offers the ability to upload and use your own <strong>Custom SVG Icons<\/strong> across your Kadence website. You can also search for and directly import Icons to <em>Kadence Blocks.<\/em><br><br>There are a total of three ways to do this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using the built-in icon manager<\/strong>: This is the modern and recommended method. It lets you directly add Custom SVG Icons to your Blocks with just a few clicks. This method allows you to upload SVG files or directly paste in SVG Code.\n<ul class=\"wp-block-list\">\n<li><em>This method <span style=\"text-decoration: underline\">only<\/span> works for <strong>Kadence<\/strong> <strong>Blocks<\/strong> <strong>+ Blocks Pro <\/strong>within the block editor. To use Custom Icons within the Kadence Theme, refer to the &#8220;Using IcoMoon&#8221; method below.<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Using the Kadence Icon Search feature<\/strong>: When adding a custom icon in Kadence Blocks Pro, you have the option to search for and directly import your preferred icons.<\/li>\n\n\n\n<li><strong>Using IcoMoon<\/strong>: This traditional method involves converting your SVG Icons into a font with IcoMoon and then uploading the font file. \n<ul class=\"wp-block-list\">\n<li><em>This method works with <strong>both Kadence Blocks<\/strong> and the K<strong>adence Theme<\/strong>. That includes things like customizer settings that use icons, as well as theme features like <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/how-to-create-a-mega-multicolumn-menu\/\" target=\"_blank\" rel=\"noreferrer noopener\">mega menus<\/a>.<\/em><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id1992_1189f8-3e .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id1992_1189f8-3e .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id1992_1189f8-3e .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id1992_1189f8-3e .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1992_0526ef-0c, .wp-block-kadence-advancedheading.kt-adv-heading1992_0526ef-0c[data-kb-block=\"kb-adv-heading1992_0526ef-0c\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1992_0526ef-0c mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1992_0526ef-0c[data-kb-block=\"kb-adv-heading1992_0526ef-0c\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1992_0526ef-0c img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1992_0526ef-0c[data-kb-block=\"kb-adv-heading1992_0526ef-0c\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"svg-security\" class=\"kt-adv-heading1992_0526ef-0c wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1992_0526ef-0c\">SVG and Security\/Support<\/h2>\n\n\n\n<p>When using SVG formats, there are factors related to Security that should be taken into consideration. You should understand SVGs enough to be comfortable using them. Consider reading <a href=\"https:\/\/solidwp.com\/blog\/what-is-an-svg-file\/\" target=\"_blank\" rel=\"noreferrer noopener\">This SolidWP Article<\/a> that provides a general overview of what SVGs are and how they are used.<br><br>WordPress Core does not support the use of SVG formats natively. The support of SVGs in WordPress has been in discussion for a long time and is something outside of our control. You can join the conversation on WordPress SVG Support by <a href=\"https:\/\/core.trac.wordpress.org\/ticket\/24251\" target=\"_blank\" rel=\"noreferrer noopener\">Clicking Here<\/a>. You can learn about why WordPress doesn&#8217;t provide this out-the-box by <a href=\"https:\/\/www.bjornjohansen.com\/svg-in-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\">Clicking Here<\/a>.<br><br>When using SVGs, always keep the following in mind:<br><strong>-Security Risk<\/strong>: SVGs are XML-based and can be used to run malicious scripts.<br><strong>-Source<\/strong>: Create your own SVGs if possible. If not, ensure they come from a well-trusted source. Learn more <a href=\"https:\/\/solidwp.com\/blog\/what-is-an-svg-file\/#h-what-are-the-risks-involved-with-using-svg-files-on-a-wordpress-site\" target=\"_blank\" rel=\"noreferrer noopener\">here<\/a>.<br><strong>-Size<\/strong>: Use 24x24px SVGs with Kadence, as this is our standard icon dimension. Larger sizes could introduce malicious code.<br>&#8211;<strong>Sanitization<\/strong>: Always sanitize SVGs before uploading them.<br><br><em>(You should also use a Fill Icon if you wish to control the SVG Icon Color using Kadence Blocks. Stoke Icons will not work in this way. You can <a href=\"#strokes-to-fills\">click here to learn more<\/a>.)<\/em><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1992_7f3881-21, .wp-block-kadence-advancedheading.kt-adv-heading1992_7f3881-21[data-kb-block=\"kb-adv-heading1992_7f3881-21\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1992_7f3881-21 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1992_7f3881-21[data-kb-block=\"kb-adv-heading1992_7f3881-21\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1992_7f3881-21 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1992_7f3881-21[data-kb-block=\"kb-adv-heading1992_7f3881-21\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"icon-manager\" class=\"kt-adv-heading1992_7f3881-21 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1992_7f3881-21\">Adding Custom Icons using the built-in Icon Manager<\/h2>\n\n\n\n<p>Adding a Custom Icon to Kadence Blocks can be done through the built-in Icon Manager. The first step is to open the Icon Selection dropdown from the Icon Settings Block Setting. <em>(This can be done anywhere a Kadence Icon is selectable)<\/em><\/p>\n\n\n<style>.kb-image1992_8d2b92-4d .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image1992_8d2b92-4d size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1080\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-scaled.jpg\" alt=\"Uploading an SVG step 1\" class=\"kb-img wp-image-8511\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-300x127.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-1024x432.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-768x324.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-1536x648.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-2048x864.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-1-360x152.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>Under the My Icons tab, click on the Plus Icon to upload a Custom SVG.<\/p>\n\n\n<style>.kb-image1992_a65435-ee .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image1992_a65435-ee size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1231\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-scaled.jpg\" alt=\"Uploading an SVG step 2\" class=\"kb-img wp-image-8512\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-scaled.jpg 2560w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-300x144.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-1024x492.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-768x369.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-1536x739.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-2048x985.jpg 2048w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-2-360x173.jpg 360w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><\/figure>\n\n\n\n<p>This will prompt a Security Notice. The notice will ask to ensure the SVG file is Sanitized and Properly Sized. (24px by 24px).<\/p>\n\n\n<style>.kb-image1992_422c74-ff .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image1992_422c74-ff size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"670\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-3-1024x670.jpg\" alt=\"Uploading an SVG step 3\" class=\"kb-img wp-image-8513\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-3-1024x670.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-3-300x196.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-3-768x502.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-3-1536x1004.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-3-360x235.jpg 360w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-3.jpg 1624w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<style>.kb-row-layout-id1992_071a0c-0c > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1992_071a0c-0c > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1992_071a0c-0c > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id1992_071a0c-0c > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1992_071a0c-0c > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id1992_071a0c-0c > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1992_071a0c-0c alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kt-inner-column-height-full\">\n<style>.kadence-column1992_40793f-d8 > .kt-inside-inner-col{display:flex;}.kadence-column1992_40793f-d8 > .kt-inside-inner-col,.kadence-column1992_40793f-d8 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_40793f-d8 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_40793f-d8 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_40793f-d8 > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column1992_40793f-d8{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_40793f-d8{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_40793f-d8 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_40793f-d8 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_40793f-d8{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column1992_40793f-d8{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_40793f-d8{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_40793f-d8 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 1024px){.kadence-column1992_40793f-d8 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column1992_40793f-d8{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_40793f-d8{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_40793f-d8 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_40793f-d8 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_40793f-d8\"><div class=\"kt-inside-inner-col\">\n<p>After proceeding, an SVG Icon can be uploaded to WordPress. An SVG Code can also be used.<\/p>\n\n\n<style>.kb-image1992_af3411-47 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image1992_af3411-47 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1574\" height=\"1350\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4.jpg\" alt=\"Uploading an SVG step 4\" class=\"kb-img wp-image-8514\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4.jpg 1574w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-300x257.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-1024x878.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-768x659.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-1536x1317.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-360x309.jpg 360w\" sizes=\"auto, (max-width: 1574px) 100vw, 1574px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column1992_71e057-b7 > .kt-inside-inner-col{display:flex;}.kadence-column1992_71e057-b7 > .kt-inside-inner-col,.kadence-column1992_71e057-b7 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_71e057-b7 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_71e057-b7 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_71e057-b7 > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column1992_71e057-b7{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_71e057-b7{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_71e057-b7 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_71e057-b7 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_71e057-b7{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column1992_71e057-b7{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_71e057-b7{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_71e057-b7 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 1024px){.kadence-column1992_71e057-b7 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column1992_71e057-b7{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_71e057-b7{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_71e057-b7 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_71e057-b7 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_71e057-b7\"><div class=\"kt-inside-inner-col\">\n<p>To Past SVG Code, click on the paste your SVG code text at the bottom of the file upload. This will allow an SVG Code to be pasted instead.<\/p>\n\n\n<style>.kb-image1992_a8e95f-be .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image1992_a8e95f-be size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1660\" height=\"1372\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-2.jpg\" alt=\"Uploading an SVG step 4-2\" class=\"kb-img wp-image-8515\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-2.jpg 1660w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-2-300x248.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-2-1024x846.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-2-768x635.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-2-1536x1270.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-4-2-360x298.jpg 360w\" sizes=\"auto, (max-width: 1660px) 100vw, 1660px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p class=\"has--font-size\">Once the SVG is successfully uploaded, it can be accessed under the My Icons tab of the Icon Settings Block Setting. <\/p>\n\n\n<style>.kb-image1992_3406c5-75.kb-image-is-ratio-size, .kb-image1992_3406c5-75 .kb-image-is-ratio-size{max-width:300px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image1992_3406c5-75.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image1992_3406c5-75 .kb-image-is-ratio-size{align-self:unset;}.kb-image1992_3406c5-75 figure{max-width:300px;}.kb-image1992_3406c5-75 .image-is-svg, .kb-image1992_3406c5-75 .image-is-svg img{width:100%;}.kb-image1992_3406c5-75 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image1992_3406c5-75\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"944\" height=\"1024\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-5-944x1024.jpg\" alt=\"Uploading an SVG step 5\" class=\"kb-img wp-image-8516\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-5-944x1024.jpg 944w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-5-277x300.jpg 277w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-5-768x833.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-5-1417x1536.jpg 1417w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-5-360x390.jpg 360w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/Uploading-an-SVG-step-5.jpg 1566w\" sizes=\"auto, (max-width: 944px) 100vw, 944px\" \/><\/figure><\/div>\n\n\n\n<p>Now the Icon can be selected and used across Kadence. To remove an <strong><em>Icon<\/em><\/strong>, simply hover over it and click on the <strong>Red X<\/strong>.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1992_c42a87-d8, .wp-block-kadence-advancedheading.kt-adv-heading1992_c42a87-d8[data-kb-block=\"kb-adv-heading1992_c42a87-d8\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1992_c42a87-d8 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1992_c42a87-d8[data-kb-block=\"kb-adv-heading1992_c42a87-d8\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1992_c42a87-d8 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1992_c42a87-d8[data-kb-block=\"kb-adv-heading1992_c42a87-d8\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 id=\"strokes-to-fills\" class=\"kt-adv-heading1992_c42a87-d8 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1992_c42a87-d8\">Converting SVG Strokes to Fills<\/h3>\n\n\n\n<p>When using SVG Images and trying to set a Color, our Blocks determine the color by setting a <strong>Fill<\/strong> <strong>Color<\/strong>. If your SVG uses <em>Strokes<\/em> <span style=\"text-decoration: underline\">instead<\/span> of <em>Fills<\/em>, the Icon Color Block Setting won&#8217;t take effect.<br><br>To counter this, consider converting your SVG Stroke Image into an SVG Fill Image instead. This can be done using a tool, such as <a href=\"https:\/\/iconly.io\/tools\/svg-convert-stroke-to-fill\" target=\"_blank\" rel=\"noreferrer noopener\">This One<\/a>. This tool is created by <em>Iconly<\/em> and converts <strong>SVGs<\/strong> that use a <strong>Stroke<\/strong> into <strong>SVGs<\/strong> that use a <strong>Fill<\/strong> instead, allowing you to control the <strong>Fill<\/strong> <strong>Color<\/strong> with <strong>Kadence<\/strong> <strong>SVG<\/strong> <strong>Block<\/strong> <strong>Settings<\/strong>. <em>(This conversion doesn&#8217;t change the visual appearance of the icon or image; it only changes the attribute and method used to define the path of the icon.)<\/em><\/p>\n\n\n<style>.kb-row-layout-id1992_b38bca-62 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1992_b38bca-62 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1992_b38bca-62 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);grid-template-columns:repeat(2, minmax(0, 1fr));}.kb-row-layout-id1992_b38bca-62 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1992_b38bca-62 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id1992_b38bca-62 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1992_b38bca-62 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kt-inner-column-height-full\">\n<style>.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{display:flex;}.kadence-column1992_8b74c0-61 > .kt-inside-inner-col,.kadence-column1992_8b74c0-61 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_8b74c0-61 > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column1992_8b74c0-61{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_8b74c0-61{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_8b74c0-61 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_8b74c0-61{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column1992_8b74c0-61{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_8b74c0-61{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 1024px){.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column1992_8b74c0-61{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_8b74c0-61{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_8b74c0-61 > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_8b74c0-61\"><div class=\"kt-inside-inner-col\">\n<p><strong>Example of a Stroke Icon.<\/strong> <em>Stroke icons<\/em> are typically defined by their outlines. They can only be directly modified using <strong>Kadence SVG Icon Color Settings<\/strong> if they are <span style=\"text-decoration: underline\"><strong>converted to fill icons<\/strong><\/span>. This conversion transforms the outline into a filled shape internally but does not alter the appearance of the icon or fill it into a solid icon. Therefore, the icon will still appear as an outlined icon.<\/p>\n\n\n<style>.kb-image1992_3199db-f6.kb-image-is-ratio-size, .kb-image1992_3199db-f6 .kb-image-is-ratio-size{max-width:100px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image1992_3199db-f6.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image1992_3199db-f6 .kb-image-is-ratio-size{align-self:unset;}.kb-image1992_3199db-f6 figure{max-width:100px;}.kb-image1992_3199db-f6 .image-is-svg, .kb-image1992_3199db-f6 .image-is-svg img{width:100%;}.kb-image1992_3199db-f6 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image1992_3199db-f6\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1137\" height=\"1280\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/books-6780765_1280.png\" alt=\"Outline Books Icon\" class=\"kb-img wp-image-8591\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/books-6780765_1280.png 1137w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/books-6780765_1280-266x300.png 266w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/books-6780765_1280-910x1024.png 910w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/books-6780765_1280-768x865.png 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/books-6780765_1280-360x405.png 360w\" sizes=\"auto, (max-width: 1137px) 100vw, 1137px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n<style>.kadence-column1992_4642a6-bc > .kt-inside-inner-col{display:flex;}.kadence-column1992_4642a6-bc > .kt-inside-inner-col,.kadence-column1992_4642a6-bc > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_4642a6-bc > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_4642a6-bc > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_4642a6-bc > .kt-inside-inner-col > .aligncenter{width:100%;}.kt-row-column-wrap > .kadence-column1992_4642a6-bc{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_4642a6-bc{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_4642a6-bc > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_4642a6-bc > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_4642a6-bc{position:relative;}@media all and (max-width: 1024px){.kt-row-column-wrap > .kadence-column1992_4642a6-bc{align-self:center;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_4642a6-bc{align-self:auto;}}@media all and (max-width: 1024px){.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_4642a6-bc > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 1024px){.kadence-column1992_4642a6-bc > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}@media all and (max-width: 767px){.kt-row-column-wrap > .kadence-column1992_4642a6-bc{align-self:center;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_4642a6-bc{align-self:auto;}.kt-inner-column-height-full:not(.kt-has-1-columns) > .wp-block-kadence-column.kadence-column1992_4642a6-bc > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}.kadence-column1992_4642a6-bc > .kt-inside-inner-col{flex-direction:column;justify-content:space-between;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_4642a6-bc\"><div class=\"kt-inside-inner-col\">\n<p><strong>Example of a Fill Icon.<\/strong> Fill icons are solid shapes. These icons can use Kadence SVG Icon Color Settings to modify their color without needing any conversion. To be a solid icon, it must already be a fill icon. So conversion isn&#8217;t needed for solid icons to use our SVG Color Settings.<\/p>\n\n\n<style>.kb-image1992_abea46-34.kb-image-is-ratio-size, .kb-image1992_abea46-34 .kb-image-is-ratio-size{max-width:100px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image1992_abea46-34.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image1992_abea46-34 .kb-image-is-ratio-size{align-self:unset;}.kb-image1992_abea46-34 figure{max-width:100px;}.kb-image1992_abea46-34 .image-is-svg, .kb-image1992_abea46-34 .image-is-svg img{width:100%;}.kb-image1992_abea46-34 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image1992_abea46-34\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"1254\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/house-1110867_1280.png\" alt=\"Solid House Icon\" class=\"kb-img wp-image-8592\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/house-1110867_1280.png 1280w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/house-1110867_1280-300x294.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/house-1110867_1280-1024x1003.png 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/house-1110867_1280-768x752.png 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2024\/06\/house-1110867_1280-360x353.png 360w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1992_dd06ab-27, .wp-block-kadence-advancedheading.kt-adv-heading1992_dd06ab-27[data-kb-block=\"kb-adv-heading1992_dd06ab-27\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1992_dd06ab-27 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1992_dd06ab-27[data-kb-block=\"kb-adv-heading1992_dd06ab-27\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1992_dd06ab-27 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1992_dd06ab-27[data-kb-block=\"kb-adv-heading1992_dd06ab-27\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"icon-search\" class=\"kt-adv-heading1992_dd06ab-27 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1992_dd06ab-27\">Using the Kadence Icon Search feature.<\/h2>\n\n\n<style>.kb-row-layout-id1992_6e9ed9-e5 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1992_6e9ed9-e5 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1992_6e9ed9-e5 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, calc(45% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)))minmax(0, calc(55% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)));}.kb-row-layout-id1992_6e9ed9-e5 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1992_6e9ed9-e5 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id1992_6e9ed9-e5 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1992_6e9ed9-e5 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column1992_cc2b30-1e > .kt-inside-inner-col,.kadence-column1992_cc2b30-1e > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_cc2b30-1e > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_cc2b30-1e > .kt-inside-inner-col{flex-direction:column;}.kadence-column1992_cc2b30-1e > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1992_cc2b30-1e > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_cc2b30-1e{position:relative;}@media all and (max-width: 1024px){.kadence-column1992_cc2b30-1e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1992_cc2b30-1e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_cc2b30-1e\"><div class=\"kt-inside-inner-col\">\n<p><strong>Kadence<\/strong> offers the ability to search for and import <strong>Custom<\/strong> <strong>Icons<\/strong>.<br><br>Open the <strong>Icon<\/strong> <strong>Selection<\/strong> dropdown from the <em>Icon Settings Block Setting<\/em><strong> <\/strong>and click on the <strong>Plus<\/strong> <strong>Icon<\/strong>.<br><br>Then, find the <strong>Search<\/strong> <strong>tab<\/strong> at the top of the <em>Add a Custom Icon<\/em> modal.<br><br>Here you can type in the desired <strong>Search<\/strong> <strong>Term<\/strong> to receive a list of relevant importable icons.<\/p>\n<\/div><\/div>\n\n\n<style>.kadence-column1992_853576-3f > .kt-inside-inner-col,.kadence-column1992_853576-3f > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_853576-3f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_853576-3f > .kt-inside-inner-col{flex-direction:column;}.kadence-column1992_853576-3f > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1992_853576-3f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_853576-3f{position:relative;}@media all and (max-width: 1024px){.kadence-column1992_853576-3f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1992_853576-3f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_853576-3f\"><div class=\"kt-inside-inner-col\"><style>.kb-image1992_aed1ab-53 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image1992_aed1ab-53 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1396\" height=\"829\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/01\/Search-For-Icon.gif\" alt=\"Search For Icon\" class=\"kb-img wp-image-11444\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.kb-row-layout-id1992_f59a3a-31 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1992_f59a3a-31 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1992_f59a3a-31 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, calc(45% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)))minmax(0, calc(55% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)));}.kb-row-layout-id1992_f59a3a-31 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1992_f59a3a-31 > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id1992_f59a3a-31 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1992_f59a3a-31 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column1992_6908bb-c5 > .kt-inside-inner-col,.kadence-column1992_6908bb-c5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_6908bb-c5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_6908bb-c5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column1992_6908bb-c5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1992_6908bb-c5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_6908bb-c5{position:relative;}@media all and (max-width: 1024px){.kadence-column1992_6908bb-c5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1992_6908bb-c5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_6908bb-c5\"><div class=\"kt-inside-inner-col\"><style>.kb-image1992_8d108d-dd .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image1992_8d108d-dd size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"745\" height=\"725\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2020\/01\/Load-More-Icons.gif\" alt=\"Load More Icons\" class=\"kb-img wp-image-11449\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column1992_d58c58-56 > .kt-inside-inner-col,.kadence-column1992_d58c58-56 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1992_d58c58-56 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1992_d58c58-56 > .kt-inside-inner-col{flex-direction:column;}.kadence-column1992_d58c58-56 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1992_d58c58-56 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1992_d58c58-56{position:relative;}@media all and (max-width: 1024px){.kadence-column1992_d58c58-56 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1992_d58c58-56 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1992_d58c58-56\"><div class=\"kt-inside-inner-col\">\n<p>To add an icon to your <strong>Custom Icons List<\/strong>, select the desired Icon and press the <strong>Add<\/strong> <strong>Button<\/strong> at the bottom right of the <em>Add a Custom Icon<\/em> modal.<br><br>If you do not see a desired icon at first or would like to explore additional available Icons, click on the <strong>Load<\/strong> <strong>More<\/strong> <strong>Button<\/strong> at the bottom left of the<em> Add a Custom Icon<\/em> modal.<\/p>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading1992_ad6d49-2a, .wp-block-kadence-advancedheading.kt-adv-heading1992_ad6d49-2a[data-kb-block=\"kb-adv-heading1992_ad6d49-2a\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading1992_ad6d49-2a mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading1992_ad6d49-2a[data-kb-block=\"kb-adv-heading1992_ad6d49-2a\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading1992_ad6d49-2a img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading1992_ad6d49-2a[data-kb-block=\"kb-adv-heading1992_ad6d49-2a\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"icomoon\" class=\"kt-adv-heading1992_ad6d49-2a wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading1992_ad6d49-2a\">Adding Custom Icons Using IcoMoon Fonts<\/h2>\n\n\n\n<p>Icomoon allows users to convert SVG Icons to Font Files. This is another way to display Custom Icons in Kadence. This method will also add the Custom Icons to the relative theme settings that allow an icon to be selected.<\/p>\n\n\n\n<p>Use <a href=\"https:\/\/icomoon.io\/app\/\" target=\"_blank\" rel=\"noreferrer noopener\">Icomoon (free)<\/a> to upload or choose which icons want to add. SVG Icons can be added using the Import Icons button at the top left of the page. Once all of the Icons are added and selected, click Generate Font.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2020\/01\/icons-1-1024x630.jpg\" alt=\"\" class=\"wp-image-1983\" \/><\/figure>\n\n\n\n<p>Next, download the icons.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2020\/01\/download-1024x603.jpg\" alt=\"\" class=\"wp-image-1984\" \/><\/figure>\n\n\n\n<p>Once downloaded, open the downloaded zip folder and locate the .json file.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2020\/01\/json-min-1024x582.jpg\" alt=\"\" class=\"wp-image-1990\" \/><\/figure>\n\n\n\n<p>Next, from the WP Admin Panel, navigate to Kadence Blocks &gt; Custom Icons.<\/p>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2020\/01\/icons.jpg\" alt=\"\" class=\"wp-image-1981\" \/><\/figure><\/div>\n\n\n<p>Add a new custom icon and upload the .json file. Once uploaded, all of the selected icons are imported into the custom icon post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2020\/01\/Screen-Shot-2020-01-01-at-1.12.43-PM-1024x455.png\" alt=\"\" class=\"wp-image-1985\" \/><\/figure>\n\n\n\n<p>There is also an option to show only these icons. When this is enabled, other icons will not show in Kadence Blocks.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2020\/01\/Screen-Shot-2020-01-01-at-10.38.40-AM.png\" alt=\"\" class=\"wp-image-1986\" \/><\/figure>\n\n\n\n<p>After adding the Custom Icons to the website, they can be selected like all other Kadence Icon options and will be usable across the website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/kadence-blocks\/wp-content\/uploads\/sites\/8\/2020\/01\/Screen-Shot-2020-01-01-at-3.15.53-PM-1024x377.png\" alt=\"\" class=\"wp-image-1988\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Kadence Blocks Pro offers the ability to upload and use your own Custom SVG Icons across your Kadence website. You can also search for and directly import Icons to Kadence Blocks. There are a total of three ways to do this: SVG and Security\/Support When using SVG formats, there are factors related to Security that&#8230;<\/p>\n","protected":false},"author":1265,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[418],"doc_tag":[],"knowledge_base":[7],"class_list":["post-1992","docs","type-docs","status-publish","hentry","doc_category-blocks-pro","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":1137,"total_views":"15215","reactions":{"happy":"3","normal":"1","sad":"1"},"author_info":{"display_name":"Ben Ritner","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/britner\/"},"doc_category_info":[{"term_name":"Kadence Blocks Pro","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/blocks-pro\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":418,"label":"Kadence Blocks Pro"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1992","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/1265"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=1992"}],"version-history":[{"count":13,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1992\/revisions"}],"predecessor-version":[{"id":13730,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/1992\/revisions\/13730"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=1992"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=1992"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=1992"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=1992"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}