Change SVG icon color in Elementor

> Design

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 of their quality, making them ideal for logos and complex online graphics.


SVG – Size 3 KB

Bee - PNG - 1024px

PNG (1024px) – Size 85 KB

PNG (150px) – Size 13 KB

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.

It’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.

You can easily detect an SVG file by its .svg extension.

SVG file history

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.

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.

What are SVG files used for?

Scalable vector graphics have come a long way in recent years, but what are SVGs used for in practice?

Website icons and logos.

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.

Infographics and illustrations.

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.

Pros and cons of SVG files

It is worth investigating the advantages and disadvantages of SVG before saving your images in this file format.

Advantages of SVG files

  • 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’t have to worry about SVG images losing their quality in certain browsers or when resizing them to appear in different places.
  • Basic SVG files are usually smaller than raster images, which are created from many colored pixels rather than using mathematical algorithms.
  • 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.

Disadvantages of SVG files

  • 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.
  • Only modern browsers can support SVG images. You may find it challenging to use SVG files with Internet Explorer 8 and older browsers.
  • The code contained in SVG images can be difficult to understand if you are new to their file format.

How to add an SVG image with Elementor

There are many Elementor 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 Element builder we must first enable the elementor capability to upload this type of files.

Allow unfiltered file uploading

This popup window will appear when you click on the Upload SVG button included in some widgets that use icons.

Allow unfiltered file uploading
Allow unfiltered file uploading

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 Activate button.

This file is not allowed for security reasons

You will see this message when you try to upload an SVG file from the Image widget or another widget that is not specifically for uploading SVG icons.

This file is not allowed for security reasons
This file is not allowed for security reasons

You can fix it from the Elementor page > Settings.

  1. Click on the Advanced tab.
  2. Under Allow file upload without filtering select Enable.from the drop-down menu.
  3. Click the Save Changes button.

Change the color of an SVG icon

In this tutorial I will use Adobe Illustrator 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:

  • We must fill with the color #000000 (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.
Adobe Illustrator color picker
  • In Adobe Illustrator 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.
Change color with adobe illustrator
  • When we save the file in SVG format Adobe Illustrator will show us a SVG options box, in this box we must make sure that in the Advanced Options section the CSS Properties: selector is selected the option Presentation Attributes.
Save SVG file

Where to use our icon in the Elementor builder

Once we have created our icon following the previous guidelines we can use it in the Elementor builder in all these widgets:

    • Button.
    • Separator.
    • Icon.
  • PRO
    • Form.
    • Nav menu.
    • Hot spot.
    • Flip box.
    • Call to Action.
    • Reviews.
    • Table of Contents.
    • Video playlist.
    • PayPal button.
    • Stripe Button.
    • Icon box.
    • List of icons.
    • Accordion.
    • Switch.
    • Social icons.
    • Post info.

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.

Insert SVG icon in Elementor

Links of interest

Suscríbete a Elementor Academy

Subscribe and receive notices of new content

Related topics

No related topics found
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
Scroll to Top

Generate effective SEO texts with AI to rank your website on Google

Generating effective SEO texts is essential to position our website in Google. It is important to follow the rules and create original and interesting content, both in text and video, and to have branded profiles on social networks. We must also pay attention to the structure of the content and links, as well as the spelling quality. With keyword research, copywriting and optimization of the URL, title and meta description we can create a good SEO text. The generation of internal and external links and the analysis of results are also key to improve our strategy.

Importance of SEO positioning in Google

Positioning in Google is fundamental in any digital strategy. It is important to note that there are two different types of results: SEM results and SEO results, the latter generating an ROI of 20%.

SEM vs SEO Results

SEM results are those achieved through advertising on Google, while SEO results are those achieved by optimizing the website to appear in Google’s top search results.

20% ROI

The fact of achieving a 20% ROI thanks to SEO actions is an indicator that this strategy is very efficient compared to others.

Google standards and creativity in content creation

It is important to follow Google’s rules when creating content, however, we must not neglect creativity and originality in the creation of interesting and valuable content to improve our SEO.

Content creation for SEO

The creation of interesting and original content is key to improve the positioning of our website in Google. Here are some keys to creating effective content on different platforms.

Video content on YouTube and Instagram

Video content is becoming more and more relevant in SEO content strategy. YouTube and Instagram are two of the most widely used platforms for sharing branded videos, although each has its own particularities. It is important to take these differences into account and adapt the content according to our needs. On YouTube, for example, videos should be longer and more detailed, while on Instagram, shorter and more eye-catching videos can be used.

Brand profiles in social networks

Having a presence in social networks is essential to maintain a good SEO positioning strategy. These brand profiles must be consistent with the content of our website and be active with regular publications. In addition, it is important to use keywords in the biography and use attractive content to invite users to visit our website.

Content structure, internal links and spelling

Content structure is one of the most important elements when creating content for SEO. The title hierarchy from H1 to H4 must be taken into account and follow a logical order in the content structure. It is also essential to include both internal and external links to improve the navigation and authority of our website. Finally, we must not neglect the spelling and grammar of the content, as they can negatively affect the quality of our website and therefore harm the positioning in search engines.

Keys to good SEO copywriting

To achieve a good SEO positioning in Google and improve the traffic to our website, we must take into account certain keys in the writing of our contents. These include:

Keyword research

Before writing SEO copy it is important to do keyword research. We must choose those words that are related to our content and that have a high search volume but at the same time have low competition. This will help us to better position our content in search results.

Text structure and linkbuilding

The structure of the text is key in writing a good SEO text. We must structure it with H2, H3 and H4 subtitles and use internal links that redirect to other contents of our website and external links to other sources of information related to our sector. This will contribute to increase the authority of our website and improve our positioning.

URL, title and meta description writing and optimization

The wording of the URL, the title and the meta description of our content are also important factors in SEO positioning. We must create a simple and descriptive URL, a catchy title and a meta description that summarizes the content clearly and concisely. In addition, we must include in them our keywords in a natural and coherent way.

We should not be overly obsessed with optimization per se, but focus on creating valuable, interesting and compelling content for our audience. All this will help us to improve our SEO positioning in Google and to generate quality visits to our website.

Internal and external link generation and results analysis

The generation of internal and external links is essential to improve the SEO of our website. Internal links help to distribute the value of the pages of our website, which improves the SEO of all of them, while quality external links bring authority and relevance to our website, which helps it to rank better.

Analysis through tools such as Google Analytics and Search Console

To measure the success of our SEO strategy we must analyze the data obtained through tools such as Google Analytics and Search Console. These tools allow us to know the traffic of our website, its origin, the keywords used by users, the average duration of the visit, among other aspects. In this way, we can detect and correct possible errors that are affecting our position in Google. In addition to these tools, there are other advanced options that allow us to improve the efficiency of our SEO strategy. Some of them are Ahrefs, Moz or SEMrush, which offer detailed statistics on the performance of our page and allow us to know in depth the competition.

SEO content writing services

If you don’t have enough time or resources to create quality SEO content, there are SEO content writing services that can help. These services have teams of professionals who are responsible for creating SEO-optimized content that meets all standards and is attractive to users. In addition, these services can help you research keywords, generate links and optimize your URLs, titles and meta descriptions, among other things. With the help of these services, you can significantly improve the position of your website in Google and increase traffic and quality visits.

Tips to improve the SEO positioning of our website

To improve the SEO positioning of our website, it is important to follow certain tips to achieve greater success in Google:

Think SEO when writing texts

It is essential to keep keywords and SEO optimization techniques in mind when writing any type of content, never forget this.

Knowing our target audience

It is important to know our target audience in depth, to know their needs, their interests and their behavior, so we can create content that is attractive to them.

Image optimization

Images are an important factor in SEO positioning, as they can attract users and improve the duration of their visit on our website. It is necessary to optimize the images in terms of size and weight and choose appropriate file names with the keywords of our niche.

Quality design and content

We must take care of the design of our website so that it is attractive and easy to use for the user, so that they spend more time on it. In addition, the content must be interesting and relevant to have a chance of being shared on social networks.

This is a pop-up message

Elementor has a popup message builder that you can find in the Templates menu.

Plantillas > Mensajes emergentes


Enter your access data