How To Insert Icons In WordPress

WordPress is an open-source website creation platform that is written in PHP and uses a MySQL database. In non-geek speak, it's probably the easiest and most powerful blogging and website content management system (or CMS) in existence today. WordPress is an excellent website platform for a variety of websites.

So, I know it is not easy to create your own website but WordPress makes it a matter of seconds. I have tried to find answer to the question, how to insert icons in WordPress. Here is answer to it for all those out there puzzled with the very same question. Here’s is a very simple guide explaining to you step by step using Iconscout Application. If you have not downloaded it yet do it now!

How to insert Icons in WordPress?

Step 1: Install Iconscout Desktop App

Install Iconscout App for Mac or Windows to access Millions of icons and illustrations from the library.

Step 2: Open WordPress and add new page

Once you login to your WordPress account, you will find different menus on the left hand column. To add new Post or new Page, click on the respective option followed by clicking on Add New. In below example, you can see Add New page option on the top bar.

Step 3: Click on Add Block by hitting '+' button

Once you are on the editor page, you can add block or an image.

Step 4: Search for ‘Image’ option in the block library

To add icons or any image, select Image option from the block options. You can add multiple images at once by selecting Gallery option.

Step 5: Click on the Upload image button

Click on the Upload button to add Icons from Iconscout App here. If you have already uploaded your images then you can access them by clicking on Media Library button.

Step 6: Open Iconscout App and drop icon in editor

Open Iconscout Desktop App, search for any icon by entering search term in the search bar. You will find list of icons available in different style. Hover you mouse on the icon you want to insert, drag that icon and drop it in the editor.

As you can see in the below example, we have added Facebook icon directly from the App. By default this icon will be inserted in SVG file format so you can easily scale it according to your size requirement. If you want to add PNG then you can do it from the App Settings menu. Click on the Profile icon on the bottom left corner, go to My Settings and change the file format from there. You can also change other different App options from there like preview size, theme, etc.

Once you insert the icon, you can resize it by dragging the dot icons available beside the icon. There are multiple options which you can apply on the icon like alignment, link, crop, etc.

Below is the final preview of the inserted icon.

How to insert Illustrations in WordPress?

Click on the Upload button to add Illustrations from Iconscout App here. If you have already uploaded your images then you can access them by clicking on Media Library button.

Open Iconscout Desktop App, search for any illustration by entering search term in the search bar. You will find list of illustration available in different style. Hover you mouse on the illustration you want to insert, drag that illustration and drop it in the editor. You can change your desired settings as mentioned in the icons section.

Once you insert the illustration, you can resize it by dragging the dot available beside the illustration. There are multiple options which you can apply on the illustration like alignment, link, crop, etc.

Below is the final preview of the inserted illustration.

So let us get little insight about what actually is Iconscout Application.

2 Million+ Icons and Illustrations in a single app

Yes, you heard it right about 2 Million+ icons directly in your toolbar. Iconscout has a huge library of vector icons that expands over 40+ different categories starting from Business & SEO to E-commerce. Iconscout got all the categories covered.

The first thing you will notice is the search bar. From here you can search for any icons from our vast library. Just type in the word and you will get thousands of results. You can filter them according to your need and you good to go.

Drag and Drop to WordPress

Without even selecting just drag the icon onto the desired location and the icon will appear in your tool. It is known as Drag and Drop features. If you are using a tool that supports the SVG file type file then these SVG icons after dropping can be edited in the tool itself. And don't worry about any malfunctions when playing around with different possibilities. Even if you encounter an error, or the white screen of death, the beauty of WordPress is that you can easily bring everything back with a plugin like WP Reset.

Switch between different style of icons

As mentioned above Iconscout has a vast library of icons in 10 different styles like flat, line, colored outline, solid, and many others. It is easy to change the style. Just click on the style dropdown and select the style you want the filter will be applied and you will find icons in that style.

Add your favorite designers and access their assets easily

You can access your favorite designer’s items very easily. Click on the Iconscout dropdown menu on top left corner, you will find Selected Contributor option. You will find all the contributor names there who you have followed. Simply click on any one and you will see all their icons. You can access your likes and downloads by clicking on My likes and My Downloads from the Iconscout dropdown menu on top. Here all your liked icons and downloaded icons will be shown.

Download App from here: Mac App, Windows App

Installation guide: How to install Mac App, How to install Windows App

We will include more features and improve App design very soon. Please provide us with your feedback on our Community forum. Don’t forget to check out Iconscout for your design needs.