Open the contents index
This guide was updated on
In today’s guide we see how to achieve custom icons for your website or blog in WordPress.
There is no shadow of a doubt: as far as web design is concerned, icons are becoming increasingly important and, sometimes, they are used not only to support, but also to replace written text.
You can often find icons in a website menu, but also in different areas of the page.
For example, if you are on a website and you see a bag icon, on which page do you think you will be redirected by clicking on it? Simple: on the Cart page.
Even more intuitive is the connection between icons and social platforms. It is now very rare to see text links to social networks. In the vast majority of cases, the official icons Facebook, Twitter, Google+, Pinterest, etc. are used.
Adding social icons is very simple: there are many plugins that allow you to insert sharing links (find the selection of the most valid ones on this guide), while most of the themes now have an integrated functionality to insert links to their own pages and profiles.
However, the icons you can use on your site are not limited only to social ones. In fact, you can create almost infinite ones!
Being a graphic element, it is also very important that the icons:
- are in line with the style of the theme you have installed on your site
- they all have the same style (this can be difficult to achieve if you use several plugins to add icons).
In this guide, we will therefore see how to create custom icons for your site, using free and extremely valuable online tools and plugins.
Create custom icons it is certainly a mainly aesthetic foresight, which however helps to give a more professional look to your site.
Tools to create custom icons for your website in WordPress
This site has icons representing almost anything. Without registering, it allows you to choose an icon, adjust its size (from 256px to 16px), if desired, place it on a round or square background and set its color with the color picker.
The icons can then be downloaded in .png or .svg format and are ready to be loaded into the Media Library of your WordPress site.
To see the entire collection of icons available on IconMonstr, click here. It is a collection of almost 4000 icons. Surely you will find the one that’s right for you, among all those available.
Note! The favicon of the websites (that is, the small image that appears in the browser tab) is standard size 16px x 16px. You could then use IconMonstr to create a custom favicon.
The second tool I want to introduce you to is Fontastic. This website is very interesting and will be particularly useful for web designers who have to create and “coordinate” the icons on different web pages, platforms, etc.
Fontastic has a library of over 9000 icons. Once logged in, the icons can also be modified using CSS codes. The customization options are therefore infinite.
The created icons are then saved to Fontastic’s Amazon S3 repository. The same icon can therefore be used on multiple platforms. Whenever a change is made, the icon will be updated automatically on all websites on which it is present. This is particularly useful as it allows you to skip the step Download Image > Upload image on every single site.
However, if you prefer to download the icon as a file, Fontastic offers the download functionality in .svg format.
3) WP SVG Icons
While the two resources described in the previous paragraphs are websites, WP SVG Icons is a real plugin.
Once the plugin is installed, you can choose from over 490 icons.
The tool works like this: inside the Dashboard, you will find a new item called “WP SVG Icons“. By clicking on “Default icons set“, You can select the icon to use and also what size this must be (h1, h2, h3, etc.).
In this way, you will generate a shortcode which you can then paste into your pages.
The number of icons available is not as vast as other tools (for example, IconMonstr) but it is an excellent starting point.
In addition, WP SVG Icons also allows you to upload a custom Icon Pack (i.e., an external icon pack).
Finally, the last tool we will look at in this guide on how to create custom icons for your site is Menu Icons.
Sometimes it can be very useful to use icons in the menu. However, there are still few WordPress themes that include this functionality.
If you like the idea, you can install the Menu Icons plugin.
This tool is also very interesting: once installed, activated and configured (find the section “Settings” inside Appearance > Menu) you can, for each menu item, select an icon among the many available.
The icons included are taken from excellent resources, including Dashicons (these are the official WordPress icons), Font Awesome, Genericons and others.
To implement these Genericons icons on your WordPress site, you can use basic HTML code (if you want to insert in themes and functions) or shortcodes (to include them in posts or widgets).
You can change the color of the icons, rotate them and change their size via css or, if you have implemented them via shortcode, the attribute for the size (size).
We have come to the end of this rundown on some of the resources available to create custom icons for your site.
As you can see, all these tools are quick and easy to use. They will help you have a more professional-looking site.
What tool do you use to create your site icons?
As always, I invite you to share your opion (or whatever question you have), in the comments section below.
See you next guide!