How to Add Custom SVG Icons to Elementor Properly

Preface

Are you looking to spice up your Elementor website with custom icons? Forget about boring, generic icons and say hello to the crisp, scalable world of SVG icons! In this guide, we’ll walk you through how to add custom SVG icons to Elementor properly, ensuring your website looks professional and visually appealing. Whether you’re a beginner or an experienced web designer, this tutorial will provide you with the knowledge and steps to enhance your website’s aesthetic.

Why Use SVG Icons in Elementor?

Before diving into the how-to, let’s quickly cover why you should consider using SVG icons:

• Scalability: SVG (Scalable Vector Graphics) icons look sharp on any screen size, from smartphones to high-resolution desktops.
• Small File Size: Compared to traditional image formats, SVG files are typically smaller, which helps improve your website’s loading speed.
• Customization: You can easily change the color and size of SVG icons using CSS, giving you more control over your website’s design.
• Accessibility: SVG icons are accessible to screen readers, making your website more inclusive.

Method 1: Using a Plugin (Recommended for Beginners)

One of the easiest ways to add custom SVG icons to Elementor is by using a plugin. Several plugins are available in the WordPress repository that simplify the process. For this tutorial, we’ll use the ‘SVG Support’ plugin.

Step 1: Install the SVG Support Plugin

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Add New.
3. Search for ‘SVG Support’.
4. Click Install Now and then Activate.

Step 2: Uploading Your SVG Icons

With the SVG Support plugin activated, you can now upload SVG files to your media library just like any other image:

1. Go to Media > Add New.
2. Drag and drop or select your SVG files to upload.

Hint: Ensure your SVG files are properly optimized. You can use online tools like [SVGOMG](https://jakearchibald.github.io/svgomg/) to reduce the file size without losing quality.

Step 3: Adding SVG Icons to Elementor

Now that your SVG icons are uploaded, you can add them to your Elementor pages like this:

1. Open the Elementor editor on the page you want to add the icon.
2. Drag and drop the Image widget to your desired location.
3. Click on the Choose Image button.
4. Select your SVG icon from the Media Library.
5. Adjust the size and alignment as needed in the Elementor settings.

Method 2: Adding SVG Icons Using Code (For Advanced Users)

If you’re comfortable with code, you can directly add SVG icons to your Elementor website using HTML and CSS. This method gives you more control over the icon’s appearance and behavior.

Step 1: Upload SVG Icons to Your Theme’s Directory

First, you’ll need to upload your SVG icons to your WordPress theme’s directory. A common practice is to create an ‘images’ or ‘svg’ folder inside your theme directory.

1. Connect to your website using an FTP client (e.g., FileZilla) or the File Manager in your hosting control panel.
2. Navigate to your theme directory (/wp-content/themes/your-theme-name/).
3. Create a new folder (e.g., ‘svg-icons’).
4. Upload your SVG files to this folder.

Step 2: Enqueue the SVG Icons CSS:

Info: To add custom code to a WordPress Theme without directly modifying the theme files, it is best practice to use a Child Theme. If you are using a WordPress theme or a framework like Astra Pro its recommended to use the methods that are provided.

To get this done well create the following function. Therefore you need your functions.php file. More information can be found here: WordPress functions.php – What it is and where to find it?

function enqueue_custom_svg_styles() {
    wp_enqueue_style( 'custom-svg-icons', get_stylesheet_directory_uri() . '/css/custom-svg-icons.css' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_svg_styles' );

Step 3: Add CSS Rules for the SVG Icons

Next, add CSS rules to style your SVG icons. You can add these rules to your theme’s style.css file or use Elementor’s custom CSS feature.

For example, we define each SVG icon to get loaded properly.

.custom-svg-icon-1 {
    width: 30px; /* Adjust size as needed */
    height: 30px;
    background-image: url('path-to-your-svg-icon-1.svg');
    background-size: cover;
    display: inline-block;
}

Step 4: Adding SVG Icons to Elementor Using HTML

Now, you can add your SVG icons to Elementor using the HTML widget:

1. Open the Elementor editor on the page you want to add the icon.
2. Drag and drop the HTML widget to your desired location.
3. Add the following HTML code:

4. Customize the size, color, and other properties using CSS.

Hint: Use CSS classes to target specific icons and apply different styles. This makes it easier to manage your icons and maintain a consistent design across your website.

Method 3: Using inline SVG in Elementor (Not Recommended)

Another method is to directly embed the SVG code into your Elementor pages. However, this method is less maintainable and can clutter your code.

Step 1: Get the SVG Code

Open your SVG file in a text editor and copy the entire code.

Step 2: Add the SVG Code to Elementor

1. Open the Elementor editor on the page where you want to add the icon.
2. Drag and drop the HTML widget to your desired location.
3. Paste the SVG code into the HTML widget.
4. Adjust the size and color using inline styles or CSS.

Info: While this method is quick, it can make your code harder to manage. It’s generally better to use the plugin or code-based methods for better organization and maintainability. Also, the usage of embedded SVG code (also knows as inline svg) decreases your pagespeed. The browser can not cache the code since it is embedded.

Tips for Using SVG Icons Effectively

• Optimize Your SVGs: Always optimize your SVG files to reduce their size. Tools like SVGOMG can help with this.
• Use a Consistent Style: Maintain a consistent style for all your icons to create a cohesive look and feel.
• Test on Different Devices: Ensure your SVG icons look good on various devices and screen sizes.
• Consider Accessibility: Provide appropriate alt attributes for your SVG icons to improve accessibility.
• Use Pretty Links: When mentioning Elementor or Astra Pro always use our pretty links for affiliate reasons

Conclusion

Adding custom SVG icons to Elementor can significantly enhance your website’s design and user experience. Whether you choose to use a plugin or implement the icons using code, the benefits of scalability, small file size, and customization make SVG icons a worthwhile addition to your web design toolkit. With the steps outlined in this guide, you’re well-equipped to start using SVG icons to create beautiful, professional-looking websites. Startmakingwebsites.com is here to help you master these skills with ease and provide the resources you need. Happy designing!