{"id":6550,"date":"2022-06-21T19:17:07","date_gmt":"2022-06-21T17:17:07","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/change-the-color-of-svg-icons-in-elementor\/"},"modified":"2026-09-02T19:42:55","modified_gmt":"2026-09-02T17:42:55","slug":"change-the-color-of-svg-icons-in-elementor","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/change-the-color-of-svg-icons-in-elementor\/","title":{"rendered":"Change the Color of SVG Icons in Elementor"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Step-by-step video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cambiar el color de iconos SVG en Elementor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/HKWfEN4EBEM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"0-%C2%BFqu%C3%A9-es-un-archivo-svg\">What is an SVG file?<\/h2>\n\n<p class=\"wp-block-paragraph\"><em>Scalable Vector Graphics<\/em> (SVG) is a web-friendly vector file format. Unlike pixel-based <em>raster files<\/em> such as JPEGs, vector files store images using mathematical formulas based on points and lines on a grid. This means vector files like SVG can be resized significantly without losing any quality, making them ideal for logos and complex online graphics.   <\/p>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee2.svg\"><img decoding=\"async\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee2.svg\" alt=\"Bee - SVG\" class=\"wp-image-4827\" style=\"width:359px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">SVG &#8211; Size 3 KB<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"932\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png\" alt=\"Bee - PNG - 1024px\" class=\"wp-image-4824\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png 1024w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-500x455.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-768x699.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-600x546.png 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">PNG (1024px) &#8211; Size 85 KB<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee.png\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"137\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee.png\" alt=\"Bee\" class=\"wp-image-4825\" style=\"width:359px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">PNG (150px) &#8211; Size 13 KB<\/p>\n<\/div>\n<\/div>\n\n<p class=\"wp-block-paragraph\">The size of an SVG file depends on how much image data it contains, but it\u2019s generally smaller than most other file types. Complex graphics with many paths and anchor points will take up more storage space than simpler, cleaner designs. <\/p>\n\n<p class=\"wp-block-paragraph\">It\u2019s not just their scalability that makes SVGs so popular with web designers. SVGs are written in XML code, which means they store any text information as literal text rather than shapes. This allows search engines like Google to read SVG graphics for their keywords, which can potentially help a website rank higher in search results.  <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">You can easily spot an SVG file by its <strong>.svg<\/strong> extension.<\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\" id=\"historia-del-archivo-svg-b1b4932e-04fc-4758-a606-17c26a1ae7b1\">History of the SVG file<\/h2>\n\n<p class=\"wp-block-paragraph\">The history of the SVG file goes back to the late 1990s, when the World Wide Web Consortium (W3C) invited developers to submit proposals for a new type of vector graphic format. Six competing proposals were submitted and helped shape what ultimately became the W3C\u2019s SVG format.  <\/p>\n\n<p class=\"wp-block-paragraph\">SVGs took a while to grow in popularity. There was relatively little support for them until 2017, when people began to see the benefits of using SVG in modern web browsers. SVG files are now widely used for 2D website images because most browsers and vector drawing applications can handle them easily.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"para-que-se-utilizan-los-archivos-svg-9841dbbb-f9c2-4fe5-8387-27f93dbeeb34\">What are SVG files used for?<\/h2>\n\n<p class=\"wp-block-paragraph\">Scalable vector graphics have come a long way in recent years, but what are SVGs used for in practice?<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"iconos-y-logotipos-del-sitio-web--408c1260-6438-41e7-8a0d-305d8145492d\">Website icons and logos.<\/h3>\n\n<p class=\"wp-block-paragraph\">Designers often use SVG to display website icons such as buttons, as well as company logos. This file type\u2019s ability to scale up or down without compromising quality makes it ideal for graphics that need to appear in multiple places and in a variety of sizes. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"infografias-e-ilustraciones--a5e7ac03-4cae-41df-b241-3cf8dcc37811\">Infographics and illustrations.<\/h3>\n\n<p class=\"wp-block-paragraph\">Thanks to the use of XML within SVG files, search engines like Google can read charts and graphs with lots of text, which can help with search engine optimization. Because Google can detect keywords within SVGs, it can potentially push a web page to a higher ranking in search results. Plus, to help make web pages much more engaging, SVGs also support animation.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"pros-y-contras-de-los-archivos-svg-1037a193-6a10-4d94-8255-3592a65a5a92\">Pros and cons of SVG files<\/h2>\n\n<p class=\"wp-block-paragraph\">It\u2019s worth looking into the advantages and disadvantages of SVG before saving your images in this file format.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"ventajas-de-los-archivos-svg-fbcb331c-faed-4507-a6e3-4aff933fc839\">Advantages of SVG files<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Unlike raster files, which are made up of pixels, vector graphics like SVGs always maintain their resolution, no matter how large or small you make them. You don\u2019t have to worry about SVG images losing quality in certain browsers or when you resize them to appear in different places.  <\/li>\n\n\n\n<li>Basic SVG files are usually smaller than raster images, which are created from many colored pixels rather than using mathematical algorithms. <\/li>\n\n\n\n<li>Because SVG files treat text as text (not as design), screen readers can scan any words contained in SVG images. This is very useful for people who need help reading web pages. Search engines can also read and index SVG image text.  <\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"desventajas-de-los-archivos-svg-782f4ecd-7218-49f7-ae8c-025c16d70744\">Disadvantages of SVG files<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>SVG files are great for web graphics such as logos, illustrations, and charts. But their lack of pixels makes it difficult to display high-quality digital photos. JPEG files are generally better for detailed photographs.   <\/li>\n\n\n\n<li>Only modern browsers can support SVG images. You may find it challenging to use SVG files with Internet Explorer 8 and other older browsers.  <\/li>\n\n\n\n<li>The code inside SVG images can be hard to understand if you\u2019re new to the file format.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"como-anadir-una-imagen-svg-con-elementor-9b5703af-99e9-4483-b21d-119b4245a8a3\">How to add an SVG image with Elementor<\/h2>\n\n<p class=\"wp-block-paragraph\">There are many <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> widgets that let us upload images or icons in SVG format. We can upload these files from the Media Library without any restrictions, but if we want to do it from the <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> builder, we first need to enable Elementor\u2019s ability to upload this type of file. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"permitir-la-subida-de-archivos-sin-filtrar-91351259-80f5-4c26-8482-77e7dbc2f1b8\">Allow unfiltered file uploads<\/h3>\n\n<p class=\"wp-block-paragraph\">This pop-up will appear when you click the <em>Upload SVG<\/em> button included in some widgets that use icons.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg\"><img decoding=\"async\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg\" alt=\"Allow unfiltered file uploads\" class=\"wp-image-18243\"\/><\/a><\/figure>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/permitir_la_subida_de_archivos_sin_filtrar.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/permitir_la_subida_de_archivos_sin_filtrar.gif\" alt=\"Allow unfiltered file uploads\" class=\"wp-image-4831\"\/><\/a><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">The first time you try to upload an SVG icon, you\u2019ll see a warning message letting you know that uploading any file, including SVG files, can pose a potential security risk. If you understand the risks involved and agree to continue, click the <strong>Enable<\/strong> button. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"este-archivo-no-esta-permitido-por-motivos-de-seguridad-92de5326-9262-4b7e-9190-4ee1fda11bfe\">This file is not allowed for security reasons<\/h3>\n\n<p class=\"wp-block-paragraph\">You\u2019ll see this message when you try to upload an SVG file from the <em>Image<\/em> widget or another widget that isn\u2019t specifically for uploading SVG icons.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/error-al-subir-un-archivo-svg.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"191\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/error-al-subir-un-archivo-svg.jpg\" alt=\"This file is not allowed for security reasons\" class=\"wp-image-4832\"\/><\/a><\/figure>\n<\/div>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif\" alt=\"This file is not allowed for security reasons\" class=\"wp-image-4834\"\/><\/a><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">You can fix it from the <em>Elementor &gt; Settings<\/em> page. <\/p>\n\n<ol class=\"wp-block-list\">\n<li>Click the <strong>Advanced<\/strong> tab.<\/li>\n\n\n\n<li>Under <strong>Allow unfiltered file uploads<\/strong>, select <em>Enable<\/em> from the dropdown menu.<\/li>\n\n\n\n<li>Click the <strong>Save Changes<\/strong> button.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"cambiar-el-color-a-un-icono-svg--eed461c4-aec0-4d5e-a9ab-1012c9b89fe6\">Change the color of an SVG icon <\/h2>\n\n<p class=\"wp-block-paragraph\">In this tutorial, I\u2019ll use <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> to create or modify SVG files. To be able to change the color of an SVG icon from the Elementor builder, the following must be true: <\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li>We must fill the entire icon (or the part we want to change from the Elementor builder) with the color <mark style=\"background-color:#000000\" class=\"has-inline-color has-colmena-gris-claro-color\">#000000<\/mark> (black in hexadecimal format).<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"483\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg\" alt=\"Adobe Illustrator color picker\" class=\"wp-image-4835\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg 710w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator-500x340.jpg 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator-600x408.jpg 600w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/a><\/figure>\n<\/div>\n<ul start=\"2\" class=\"wp-block-list\">\n<li>In <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a>, we can set stroke (border) color and fill color. Elementor will only change the fill color, so it\u2019s best not to assign a stroke color to the icon and leave only the fill color.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cambiar-color-con-adobe-illustrator.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cambiar-color-con-adobe-illustrator.gif\" alt=\"Change color with Adobe Illustrator\" class=\"wp-image-4837\"\/><\/a><\/figure>\n\n<ul start=\"3\" class=\"wp-block-list\">\n<li>When we save the file in SVG format, <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> will show an SVG options dialog. In this dialog, make sure that under <em>Advanced Options<\/em>, the <em>CSS Properties:<\/em> selector is set to <strong>Presentation Attributes<\/strong>.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/guardar_archivo_svg.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/guardar_archivo_svg.gif\" alt=\"Save SVG file\" class=\"wp-image-4838\"\/><\/a><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"donde-usar-nuestro-icono-en-el-constructor-de-elementor-9b48113e-277c-4456-95f4-e6387ecc6717\">Where to use our icon in the Elementor builder<\/h3>\n\n<p class=\"wp-block-paragraph\">Once we\u2019ve created our icon following the guidelines above, we can use it in the Elementor builder in all of these widgets:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>BASIC\n<ul class=\"wp-block-list\">\n<li>Button.<\/li>\n\n\n\n<li>Divider.<\/li>\n\n\n\n<li>Icon.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>PRO<ul><li>Form.<\/li><li>Nav Menu.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Hotspot.<\/li>\n\n\n\n<li>Flip Box.<\/li>\n\n\n\n<li>Call to Action.<\/li>\n\n\n\n<li>Reviews.<\/li>\n\n\n\n<li>Table of Contents.<\/li>\n\n\n\n<li>Video Playlist.<\/li>\n\n\n\n<li>PayPal Button.<\/li>\n\n\n\n<li>Stripe Button.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>GENERAL\n<ul class=\"wp-block-list\">\n<li>Icon Box.<\/li>\n\n\n\n<li>Icon List.<\/li>\n\n\n\n<li>Accordion.<\/li>\n\n\n\n<li>Toggle.<\/li>\n\n\n\n<li>Social Icons.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>SINGLE\n<ul class=\"wp-block-list\">\n<li>Post Info.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">We can also use it as the Site Logo and in other widgets like Image, but without the ability to change the color from Elementor.<\/p>\n<\/blockquote>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-icono.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-icono.gif\" alt=\"Insert SVG icon in Elementor\" class=\"wp-image-4839\"\/><\/a><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"enlaces-relacionados-04f3361a-2f20-49d7-b697-cb6cb84b3a0e\">Useful links<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Iconfinder: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\">https:\/\/www.iconfinder.com\/<\/a> (Download icons in SVG format).<\/li>\n\n\n\n<li>IcoMoon: <a rel=\"noreferrer noopener\" href=\"https:\/\/icomoon.io\/\" target=\"_blank\">https:\/\/icomoon.io\/<\/a> (Create your own icon gallery in .ico format).<\/li>\n\n\n\n<li>Dribbble: <a rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/\" target=\"_blank\">https:\/\/dribbble.com\/<\/a> (More than 10,000 free icons).<\/li>\n\n\n\n<li>Iconmonstr: <a rel=\"noreferrer noopener\" href=\"https:\/\/iconmonstr.com\/\" target=\"_blank\">https:\/\/iconmonstr.com\/<\/a> (Free black-and-white icons with multiple variations).<\/li>\n\n\n\n<li>DeviantArt: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.deviantart.com\/\" target=\"_blank\">https:\/\/www.deviantart.com\/<\/a> (More than 200,000 free icons).<\/li>\n\n\n\n<li>Fontello: <a href=\"https:\/\/fontello.com\/\">https:\/\/fontello.com\/<\/a> (Thousands of free monochrome icons in various sizes and formats).<\/li>\n\n\n\n<li>Adobe Illustrator: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\">https:\/\/www.adobe.com\/es\/products\/illustrator.html<\/a> (Vector graphics software).<\/li>\n\n\n\n<li>1000 free Downloads: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.1001freedownloads.com\/\" target=\"_blank\">https:\/\/www.1001freedownloads.com\/<\/a> (More than 1,001 free downloads).<\/li>\n\n\n\n<li>CSS Author: <a rel=\"noreferrer noopener\" href=\"https:\/\/cssauthor.com\/\" target=\"_blank\">https:\/\/cssauthor.com\/<\/a> (Hundreds of the best free icon sets in various formats).<\/li>\n\n\n\n<li>GraphicBurger: <a rel=\"noreferrer noopener\" href=\"https:\/\/graphicburger.com\/\" target=\"_blank\">https:\/\/graphicburger.com\/<\/a> (Free themed icon sets).<\/li>\n\n\n\n<li>Flaticon: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\">https:\/\/www.flaticon.com\/<\/a> (Lets you convert icons into downloadable fonts to control them in CSS).<\/li>\n\n\n\n<li>Icons8: <a rel=\"noreferrer noopener\" href=\"https:\/\/icons8.com\/\" target=\"_blank\">https:\/\/icons8.com\/<\/a> (More than 350,000 free professional icons).<\/li>\n\n\n\n<li>Freepik: <a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.freepik.com\/<\/a> (More than 872,000 of these resources are free icons).<\/li>\n\n\n\n<li>Font Awesome: <a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/\" target=\"_blank\">https:\/\/fontawesome.com\/<\/a> (Features more than 14,000 icons).<\/li>\n\n\n\n<li>Good Stuff No Nonsense: <a rel=\"noreferrer noopener\" href=\"https:\/\/goodstuffnononsense.com\/\" target=\"_blank\">https:\/\/goodstuffnononsense.com\/<\/a> (Free hand-drawn icons in SVG, PNG, AI, EPS, and PSD).<\/li>\n\n\n\n<li>The Noun Project: <a rel=\"noreferrer noopener\" href=\"https:\/\/thenounproject.com\/\" target=\"_blank\">https:\/\/thenounproject.com\/<\/a> (Most icons are available in PNG or SVG).<\/li>\n\n\n\n<li>Iconshock: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.iconshock.com\/\" target=\"_blank\">https:\/\/www.iconshock.com\/<\/a> (Extensive library of more than 2 million professional icons).<\/li>\n\n\n\n<li>Pixeden: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.pixeden.com\/\" target=\"_blank\">https:\/\/www.pixeden.com\/<\/a> (The collection of free icon sets isn\u2019t particularly extensive).<\/li>\n\n\n\n<li>IconsFlow: <a rel=\"noreferrer noopener\" href=\"https:\/\/iconsflow.com\/\" target=\"_blank\">https:\/\/iconsflow.com\/<\/a> (IconsFlow constantly updates its library).<\/li>\n\n\n\n<li>Streamline: <a href=\"https:\/\/www.streamlinehq.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.streamlinehq.com\/<\/a> (More than 85,000 unique, professional icons designed in-house).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step-by-step video What is an SVG file? Scalable Vector Graphics (SVG) is a web-friendly vector file format. Unlike pixel-based raster files such as JPEGs, vector files store images using mathematical formulas based on points and lines on a grid. This means vector files like SVG can be resized significantly without losing any quality, making them [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6551,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"How to Change SVG Icon Colors in Elementor: Easy Guide","_seopress_titles_desc":"What is an SVG file? Scalable Vector Graphics (SVG) is a web-friendly vector file format. Unlike pixel-based raster files such as JPEGs, vector files are based on\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"384","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[384],"tags":[377,385,386],"class_list":["post-6550","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-elementor","tag-web-design","tag-wordpress-customization"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6550","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6550"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6550\/revisions"}],"predecessor-version":[{"id":6552,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6550\/revisions\/6552"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6551"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6550"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6550"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6550"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}