{"id":34711,"date":"2022-06-21T19:17:07","date_gmt":"2022-06-21T17:17:07","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/change-svg-icon-color-in-elementor\/"},"modified":"2023-08-29T14:23:13","modified_gmt":"2023-08-29T12:23:13","slug":"change-svg-icon-color-in-elementor","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/change-svg-icon-color-in-elementor\/","title":{"rendered":"Change SVG icon color in Elementor"},"content":{"rendered":"\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#0-%C2%BFqu%C3%A9-es-un-archivo-svg\">What is an SVG file?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#historia-del-archivo-svg-b1b4932e-04fc-4758-a606-17c26a1ae7b1\">SVG file history<\/a><\/li><li class=\"toc-level-1\"><a href=\"#para-que-se-utilizan-los-archivos-svg-9841dbbb-f9c2-4fe5-8387-27f93dbeeb34\">What are SVG files used for?<\/a><\/li><li class=\"toc-level-2\"><a href=\"#iconos-y-logotipos-del-sitio-web--408c1260-6438-41e7-8a0d-305d8145492d\">Website icons and logos.<\/a><\/li><li class=\"toc-level-2\"><a href=\"#infografias-e-ilustraciones--a5e7ac03-4cae-41df-b241-3cf8dcc37811\">Infographics and illustrations.<\/a><\/li><li class=\"toc-level-1\"><a href=\"#pros-y-contras-de-los-archivos-svg-1037a193-6a10-4d94-8255-3592a65a5a92\">Pros and cons of SVG files<\/a><\/li><li class=\"toc-level-2\"><a href=\"#ventajas-de-los-archivos-svg-fbcb331c-faed-4507-a6e3-4aff933fc839\">Advantages of SVG files<\/a><\/li><li class=\"toc-level-2\"><a href=\"#desventajas-de-los-archivos-svg-782f4ecd-7218-49f7-ae8c-025c16d70744\">Disadvantages of SVG files<\/a><\/li><li class=\"toc-level-1\"><a href=\"#como-anadir-una-imagen-svg-con-elementor-9b5703af-99e9-4483-b21d-119b4245a8a3\">How to add an SVG image with Elementor<\/a><\/li><li class=\"toc-level-2\"><a href=\"#permitir-la-subida-de-archivos-sin-filtrar-91351259-80f5-4c26-8482-77e7dbc2f1b8\">Allow unfiltered file uploading<\/a><\/li><li class=\"toc-level-2\"><a href=\"#este-archivo-no-esta-permitido-por-motivos-de-seguridad-92de5326-9262-4b7e-9190-4ee1fda11bfe\">This file is not allowed for security reasons<\/a><\/li><li class=\"toc-level-1\"><a href=\"#cambiar-el-color-a-un-icono-svg--eed461c4-aec0-4d5e-a9ab-1012c9b89fe6\">Change the color of an SVG icon  <\/a><\/li><li class=\"toc-level-2\"><a href=\"#donde-usar-nuestro-icono-en-el-constructor-de-elementor-9b48113e-277c-4456-95f4-e6387ecc6717\">Where to use our icon in the Elementor builder<\/a><\/li><li class=\"toc-level-1\"><a href=\"#enlaces-relacionados-04f3361a-2f20-49d7-b697-cb6cb84b3a0e\">Related links<\/a><\/li><\/ul>\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><em>Scalable Vector Graphics<\/em> (SVG) is a vector file format suitable for the web. Unlike pixel-based <em>raster files<\/em> such as JPEGs, vector files store images through mathematical formulas based on points and lines in a grid. This means that vector files such as SVG can be significantly resized without losing any of their 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-28f84493 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\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee2.svg\"><img decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee2.svg\" alt=\"Bee\" class=\"wp-image-18238\"\/><\/a><\/figure>\n\n\n<p class=\"has-text-align-center\">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:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"932\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&quality=92&webp=92&avif=92\" alt=\"Bee - PNG - 1024px\" class=\"wp-image-18240\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 1024w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000-300x273.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000-768x699.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=204 204w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=409 409w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=614 614w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=819 819w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n<p class=\"has-text-align-center\">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:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee.png?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee.png?strip=all&quality=92&webp=92&avif=92&resize=359%2C328\" alt=\"\" class=\"wp-image-18239\" width=\"359\" height=\"328\"\/><\/a><\/figure>\n\n\n<p class=\"has-text-align-center\">PNG (150px) &#8211; Size 13 KB<\/p>\n<\/div>\n<\/div>\n\n<p>The size of an SVG file depends on the amount of image data it contains, but is 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>It&#8217;s not just their resizing capabilities that make SVGs so popular with web designers. SVGs are written in XML code, which means that they store any text information as literal text instead of shapes. This allows search engines like Google to read SVG graphics for their keywords, which can potentially help a website rise in search rankings.<\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>You can easily detect 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\">SVG file history<\/h2>\n\n<p>The history of the SVG file dates 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 inform what eventually became the W3C SVG format.  <\/p>\n\n<p>SVGs took a while to grow in popularity. There was relatively little support for them until 2017, when people started 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 drawing applications for vector files can easily handle them.<\/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>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>Designers often use SVG to display website icons such as buttons, as well as company logos. The ability of this file type to scale up or down without compromising quality means that they are ideal for graphics that must appear in multiple locations 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>Thanks to the use of XML within SVG files, search engines such as Google can read text-heavy charts and graphs, which can help with search engine optimization. Because Google can detect keywords within SVGs, it can potentially boost a web page to a higher ranking in search results. In addition, to help make web pages much more interesting, 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>It is worth investigating 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 composed of pixels, vector graphics such as SVGs always maintain their resolution, no matter how large or small you make them. You don&#8217;t have to worry about SVG images losing their quality in certain browsers or when resizing 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 (and not as layout), 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 excellent for web graphics such as logos, illustrations, and graphics. But its lack of pixels makes it difficult to view high-quality digital photographs. 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 older browsers.  <\/li>\n\n\n\n<li>The code contained in SVG images can be difficult to understand if you are new to their 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>There are many <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> widgets that allow us to upload images or icons in SVG format. We can upload this type of files from the media gallery without any restriction, but if we want to do it from the <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Element<\/a> builder we must first enable the elementor capability to upload this type of files.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"permitir-la-subida-de-archivos-sin-filtrar-91351259-80f5-4c26-8482-77e7dbc2f1b8\">Allow unfiltered file uploading<\/h3>\n\n<p>This popup window will appear when you click on the <em>Upload SVG<\/em> button included in some widgets that use icons.<\/p>\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"481\" height=\"293\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Allow unfiltered file uploading\" class=\"wp-image-18243\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 481w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar-300x183.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=96 96w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=192 192w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=384 384w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/a><\/figure>\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:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C908\" alt=\"Allow unfiltered file uploading\" class=\"wp-image-18244\"\/><\/a><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p>The first time you attempt to load an SVG icon, you will be presented with a warning message alerting you that loading any file, including SVG files, may present a potential security risk. If you understand the risks involved and agree to proceed, click the <strong>Activate<\/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>You will see this message when you try to upload an SVG file from the <em>Image<\/em> widget or another widget that is not specifically for uploading SVG icons.<\/p>\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"191\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"This file is not allowed for security reasons\" class=\"wp-image-18242\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 348w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg-300x165.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=69 69w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=139 139w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=208 208w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/><\/a><\/figure>\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:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C908\" alt=\"This file is not allowed for security reasons\" class=\"wp-image-18259\"\/><\/a><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p>You can fix it from the <em>Elementor<\/em> page <em> &gt; Settings<\/em>.  <\/p>\n\n<ol class=\"wp-block-list\">\n<li>Click on the <strong>Advanced<\/strong> tab.<\/li>\n\n\n\n<li>Under <strong>Allow file upload without filtering<\/strong> select <em>Enable<\/em>.from the drop-down 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>In this tutorial I will use <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> software to create or modify SVG files. In order to be able to change the color of an SVG icon from the Elementor builder, the following must be fulfilled:<\/p>\n\n<ul class=\"wp-block-list\" start=\"1\">\n<li>We must fill with the color <mark style=\"background-color:var(--ast-global-color-8);color:#ffffff\" class=\"has-inline-color\"> #000000 <\/mark> (it is the black color in hexadecimal format) the total or the part of the icon that we want to change from the Elementor builder.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"483\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Adobe Illustrator color picker\" class=\"wp-image-18260\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 710w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator-300x204.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=142 142w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=426 426w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=568 568w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><\/figure>\n<ul class=\"wp-block-list\" start=\"2\">\n<li>In <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> we can assign stroke color (border) and fill color, Elementor will only change the fill color so it is better not to assign stroke color to the icon and leave only fill color.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-color-con-adobe-illustrator.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-color-con-adobe-illustrator.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C1032\" alt=\"Change color with adobe illustrator\" class=\"wp-image-18261\"\/><\/a><\/figure>\n<ul class=\"wp-block-list\" start=\"3\">\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 us a SVG options box, in this box we must make sure that in the <em>Advanced Options<\/em> section the <em>CSS Properties:<\/em> selector is selected the option <strong>Presentation Attributes<\/strong>.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/guardar_archivo_svg.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/guardar_archivo_svg.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C1032\" alt=\"Save SVG file\" class=\"wp-image-18262\"\/><\/a><\/figure>\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>Once we have created our icon following the previous guidelines we can use it in the Elementor builder in all 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>Separator.<\/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>Hot spot.<\/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>List of icons.<\/li>\n\n\n\n<li>Accordion.<\/li>\n\n\n\n<li>Switch.<\/li>\n\n\n\n<li>Social icons.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>INDIVIDUAL\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>We can also use it as Logo of the site and in other widgets as 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:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/insertar-icono.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/insertar-icono.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C908\" alt=\"Insert SVG icon in Elementor\" class=\"wp-image-18267\"\/><\/a><\/figure>\n<h2 class=\"wp-block-heading\" id=\"enlaces-relacionados-04f3361a-2f20-49d7-b697-cb6cb84b3a0e\">Links of interest<\/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> (black and white icons with multiple variations totally free).<\/li>\n\n\n\n<li>DevianArt: <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 1001 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 thematic 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> (Allows you to 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> (over 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> (Over 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> (It has 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 over 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 is not 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 rel=\"noreferrer noopener\" href=\"https:\/\/www.streamlinehq.com\/\" target=\"_blank\">https:\/\/www.streamlinehq.com\/<\/a> (Over 85,000 unique, professional, in-house designed icons).<\/li>\n<\/ul>\n","protected":false},"featured_media":32214,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-34711","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1920,1032,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-300x161.jpg?strip=all&quality=92&webp=92&avif=92",300,161,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-768x413.jpg",768,413,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1920,1032,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-1536x826.jpg?strip=all&quality=92&webp=92&avif=92",1536,826,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1920,1032,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"What is an SVG file? Scalable Vector Graphics (SVG) is a vector file format suitable for the web. Unlike pixel-based raster files such as JPEGs, vector files store images through mathematical formulas based on points and lines in a grid. This means that vector files such as SVG can be significantly resized without losing any&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/34711","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/32214"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=34711"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}