{"id":2071,"date":"2021-06-21T07:37:34","date_gmt":"2021-06-21T07:37:34","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=2071"},"modified":"2023-02-22T09:29:12","modified_gmt":"2023-02-22T09:29:12","slug":"how-to-use-elementor-pros-custom-icon-libraries","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/","title":{"rendered":"How to use Elementor Pro&#8217;s Custom Icon Libraries"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2071\" class=\"elementor elementor-2071\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-464a63a3 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"464a63a3\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-3d792998\" data-id=\"3d792998\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-30e4f4aa elementor-widget elementor-widget-video\" data-id=\"30e4f4aa\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=qADy2f8DsWo&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34b77f19 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"34b77f19\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4a64db3a\" data-id=\"4a64db3a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-55deae92 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"55deae92\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1441\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1441\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1442\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1442\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1441\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1441\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1441\" tabindex=\"0\" hidden=\"false\"><p>In this tutorial, we\u2019ll check out Elementor Pro&#8217;s Custom Icon Libraries feature, which gives you the ability to upload your own custom icon sets from the leading icon library font generators to your WordPress website using Elementor.<\/p><p>You&#8217;ll learn how to:<br \/>\u2714\ufe0e Create and download custom icon sets in Fontello, IcoMoon, and Fontastic.<br \/>\u2714\ufe0e Upload your sets to Elementor\u2019s Icon Library<br \/>\u2714\ufe0e Access and use your newly created icon sets on your WordPress website<br \/>\u2714\ufe0e And more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1442\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1442\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1442\" tabindex=\"0\" hidden=\"hidden\"><p>hi-oh let&#8217;s live from Elementor today<br \/>we&#8217;ll check out elemental pros custom<br \/>icon libraries feature which gives you<br \/>the ability to upload your own custom<br \/>icon sets from the leading icon library<br \/>fun generators from teller icon moon and<br \/>fantastic they&#8217;re accessible in the icon<br \/>library so you can use them within any<br \/>elements of widget that makes use of<br \/>icons let&#8217;s check it out first off let&#8217;s<br \/>go to from Telekom and see how to create<br \/>an icon set as you can see there are<br \/>many icons to choose from go ahead and<br \/>select some you can also upload your own<br \/>custom SVG files over here click the<br \/>wrench and add a CSS prefix make sure<br \/>it&#8217;s unique then give you fun to name<br \/>and finally download the font zip file<br \/>now let&#8217;s upload it to our site in the<br \/>wordpress dashboard and the elemental go<br \/>to custom icons click add new and give<br \/>the icon settin em then drag and drop<br \/>the front ellas it file to upload and<br \/>hit update you will now find the new<br \/>custom icon set in elementals custom<br \/>icons area here you&#8217;ll see the sets name<br \/>amount of icons it contains and its<br \/>unique CSS prefix now let&#8217;s see how it<br \/>works on a page I&#8217;ll go ahead and enter<br \/>the icon library as you can see there&#8217;s<br \/>a new tab for the custom icon set we<br \/>just added every icon you use no matter<br \/>which library is edited and styled using<br \/>elementals native styling controls it<br \/>completely changes the way designers<br \/>work with custom icons cool now let&#8217;s go<br \/>over to I come in like before choose<br \/>some icons or upload your own custom SVG<br \/>files click on the generate font tab and<br \/>then the Preferences button give your<br \/>font a name and give it a unique prefix<br \/>click the X to close and then download<br \/>to download your font zip file like<br \/>before go to custom icons click add new<br \/>and give the Archon set a name then drag<br \/>and drop the icon means if file to<br \/>upload and hit update awesome it&#8217;s added<br \/>to the icon library as well lastly let&#8217;s<br \/>go to fantastic you&#8217;ll need an account<br \/>in order<br \/>to create and download icon sets so go<br \/>ahead and sign up it&#8217;s quick and free<br \/>select the icons you want or import your<br \/>own by clicking add more icons in the<br \/>top menu bar click import icons and<br \/>choose your SVG file then go back to the<br \/>home page and you&#8217;ll see it under new<br \/>set click on the modify font tab to give<br \/>it a name and a unique CSS class prefix<br \/>click Save and go to the publish tab<br \/>then click download to download your<br \/>font zip file another way to add a new<br \/>icon set is via the icon library itself<br \/>simply hit upload add new and give it a<br \/>name then drag and drop the fantastic<br \/>zip file to upload and hit update and<br \/>that&#8217;s all now you know how to create<br \/>upload and use your own custom icon sets<br \/>via from teller I commune and fantastic<br \/>so you&#8217;ll always be able to find the<br \/>right icon for your projects have fun<br \/>building your own sets and make your<br \/>sites really stand out don&#8217;t forget to<br \/>subscribe to our YouTube channel for<br \/>more tips and tutorials see you later<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview In this tutorial, we\u2019ll check out Elementor Pro\u2019s Custom Icon Libraries feature, which gives you the ability to upload your own custom icon sets from the leading icon library font generators to your WordPress website using Elementor. You\u2019ll learn how to: \u2714\ufe0e Create and download custom icon sets in Fontello, IcoMoon, and [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4226,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[41],"class_list":["post-2071","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-layout","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to use Elementor Pro&#039;s Custom Icon Libraries - Academy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to use Elementor Pro&#039;s Custom Icon Libraries - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview In this tutorial, we\u2019ll check out Elementor Pro\u2019s Custom Icon Libraries feature, which gives you the ability to upload your own custom icon sets from the leading icon library font generators to your WordPress website using Elementor. You\u2019ll learn how to: \u2714\ufe0e Create and download custom icon sets in Fontello, IcoMoon, and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-21T07:37:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:29:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Icon-Libraries.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to use Elementor Pro's Custom Icon Libraries - Academy","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:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/","og_locale":"en_US","og_type":"article","og_title":"How to use Elementor Pro's Custom Icon Libraries - Academy","og_description":"Overview Transcript Overview In this tutorial, we\u2019ll check out Elementor Pro\u2019s Custom Icon Libraries feature, which gives you the ability to upload your own custom icon sets from the leading icon library font generators to your WordPress website using Elementor. You\u2019ll learn how to: \u2714\ufe0e Create and download custom icon sets in Fontello, IcoMoon, and [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/","og_site_name":"Academy","article_published_time":"2021-06-21T07:37:34+00:00","article_modified_time":"2023-02-22T09:29:12+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Icon-Libraries.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"How to use Elementor Pro&#8217;s Custom Icon Libraries","datePublished":"2021-06-21T07:37:34+00:00","dateModified":"2023-02-22T09:29:12+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/"},"wordCount":683,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Icon-Libraries.jpg","keywords":["Guides and Tutorials"],"articleSection":["Design \/ Layout"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/","url":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/","name":"How to use Elementor Pro's Custom Icon Libraries - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Icon-Libraries.jpg","datePublished":"2021-06-21T07:37:34+00:00","dateModified":"2023-02-22T09:29:12+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Icon-Libraries.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Custom-Icon-Libraries.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/how-to-use-elementor-pros-custom-icon-libraries\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Design \/ Layout","item":"https:\/\/elementor.com\/academy\/design-layout\/"},{"@type":"ListItem","position":4,"name":"How to use Elementor Pro&#8217;s Custom Icon Libraries"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=2071"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2071\/revisions"}],"predecessor-version":[{"id":9524,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/2071\/revisions\/9524"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4226"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=2071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=2071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=2071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}