Elementor Background Image - Use Icons and SVGs as Background

Elementor Background Image : Design Sections with Awesome Icons Backgrounds!

How to properly use icons as a section background! Also works with Font-Awesome!

Watch the video, or keep reading! The video covers how to filter the icons by license and how to modify them (both are not covered in the written version).

For starters, here are a few demo sections built using what we will learn.

Got the sections from the Elementor templates, just added an icon background.

Our Clients

Driving technology for leading brands
Elementor Background Image - Use Icons and SVGs as Background
Elementor Background Image - Use Icons and SVGs as Background
Elementor Background Image - Use Icons and SVGs as Background

Our company is a collective of amazing people striving to build delightful products.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using.

First, find an icon you like, set a background color to the section, then set the icon as background overlay

Verify that you have SVG uploads enabled in your elementor settings here :

You can find great icons at www.iconfinder.com, and many other websites. With icon finder it is easy to filter by license, if you are looking for free icons.

Then, simply add the icon as a background overlay, and adjust the settings

Set a background color for the Background Overlay option to show up. 

Adjust everything for mobile and tablet view also!

Elementor Background Image - Use Icons and SVGs as Background

Finally, if you want to rotate the icon and change it's color, use this website

http://vectorpaint.yaks.co.nz . (you could also use Illustrator of course) See the video for more instructions on modifying the icon.

Here are examples sections with a modified icon.

Write me

For any inquiries please email

emailme@company.com

Strategy planning

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphic design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Management

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Developing

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Also works with animated SVGs!

I used www.anigen.org to create the animation. You will need to modify the icon opacity before uploading it to avoid a bug. Set as background instead of background overlay.

How to animate an icon goes beyond the scope of this article; let me know if you are interested though.

Strategy planning

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Graphic design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Management

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Developing

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet

Leave a Reply