Icons for WordPress – Dashicons, Font Awesome or Material Design

Icons are nowadays a common part of most web site designs. Icons significantly improve the user experience as they quickly communicate visually with website visitors, no matter where they are applied. The choice of icons to use on websites is quite extensive, and they come in all kinds of graphic formats. In this article we focused on the most popular font based icons for WordPress websites, such as Dashicons, Font Awesome or Material Design icons.

Types of icons for WordPress websites

Icons for web design purposes can be in different graphical file formats. By type, icons for WordPress or any other websites are divided in the following categories:

• bitmap icons (PNG, GIF)
• vector icons (SVG)
• font icons (Dashicons, Font Awesome or Material Design…)

Bitmap and vector icons

Speaking of bitmap icons, you will rarely find JPG icons but usage of transparent PNG or even GIF icons is still quite widespread. Bitmap icons are mostly used when the design requires multicolor icons and graphical symbols. The disadvantage of bitmap icons for WordPress is their file size, that can impact the website loading speed in certain cases. Also, when resized bitmap icons can loose their sharpness and quality.

Nowadays, bitmap icons are widely replaced with vector format SVG icons. SVG icon file sizes are usually smaller than bitmap icons so their usage causes less impact on the loading speed. Furthermore, due to their vector nature SVG icons don’t lose quality and sharpness when resized or manipulated with CSS. That makes ’em a good choice for web design. If you’re using SVG icons for WordPress websites, make sure to enable SVG support, which is not enabled by default in WP.

Webfont – font based icons

Apart from SVGs, font icons are most likely the best practice of using icons in modern web design. Font based icons, as their name suggests, behave as fonts (ordinary text) and they can be manipulated as any other font used on the website. Font icons vector based same as SVGs, meaning they won’t loose quality and sharpness no matter how you manipulate them. Same as regular fonts, font based icons can be completely customized and styled using CSS. In other words, you can change their size and color, apply borders, backgrounds, shadows or any other visual property that CSS includes. They are also very lightweight and fast loading, which is another good reason to use font icons for WordPress websites.

Comparison of the Earth icon from the most popular font based icon collections. We styled the icons a bit with just a few lines of CSS code.

The downside of font based icons is that they are usually monochrome or in some cases duotone, so they might not be the best solution where the design requires colorful icons. The choice of font icons is quite wide, but in some cases you might not find the exact icon you’re looking for. If that’s the case, we suggest looking for a replacement SVG icon.

Dashicons – native icons for WordPress

Dasihicons are a collection of around 350 icons created by the WordPress team itself. You can find Dasihicons everywhere within the WordPress Dashboard, from menu buttons to editor elements. Therefore, Dasihicons have native support in WordPress, meaning they can be used right away, without any additional script loading. The usage of Dasihicons icons for WordPress is quite simple. All you have to do is add to your HTML code a span element with a class containing the dashicon name, for example <span class=”dashicons dashicons-admin-site-alt”></span>. Furthermore, you have to style the icons according to your needs using CSS.

The whole Dasihicons collection of icons for WordPress can be found within the official WP Developers Resources. The icons are grouped by topic and there’s a dynamic search field to filter the icons. Once you found the desired icon, all you need to do is copy it’s HTML code (span element) and paste it on your web page.

Dasihicons categorized as Misc. A modest variety of nicely designed icons for WordPress.

Due to the WordPress native support for Dasihicons, the usage of this icon set won’t generate any additional server requests and affect the website loading speed. If you’re lucky enough to find the exact icons you need in this icon set, we strongly suggest using this collection of icons for WordPress.

Open icon set

Material Design icons for WordPress

The original Material Design collection of around 900 icons were crafted by Google designers. That fact guarantees the icons will look and work perfectly in web appliances. This font based icon set is available for free on Google’s Material Design website. Navigating trough the icons is quite simple thanks to the dynamic search form combined with category filtering. After you find the icon you need, similarly to the Dasihicons system you need to copy the icon HTML code and paste it on your website. The icon HTML code is also a span element containing the name of the icon, for example <span class=”material-icons”>public</span>. The system also offers the possibility to download the icon in PNG or SVG format. PNG and SVG icons can be downloaded in variations such as Filled, Outlined, Rounded, Sharp or Duotone.

Material Design icons are not supported by default in WordPress, so firstly you have to enable the support for them. There a couple of ways to enable Material Design icons for website usage. The simplest way to enable MD icons for WordPress is to embed the Material Design Google Font by copying the provided <link> into the website’s head section. Embedding the Material Design Google Font will generate 2 server requests which won’t significantly affect the website loading speed.

Material Design icons categorized as Places, one of the many icon categories available in the free collection.

If you don’t find the icons you need among the around 900 icons available, there’s a community of contributors that already created over 4000 additional Material Design compatible icons. Learn more about it on the Material Design Community website.

Open icon set

Font Awesome Icons Collection in WordPress

Font Awesome is probably the most popular and commonly used font based icon set in web design. The Font Awesome icons collection contains over 1600 free icons covering a wide variety of topics. There’s a high probability you will find the icons you need there, but if you don’t, there are over 6000 additional icons in the paid Pro Collection. Font Awesome frequently updates their collection with new icons and redesigns older ones. Browsing the Font Awesome Icons Collection is easy using a smart search field combined with category and term or topic filtering. Once you find the icons for WordPress you need, you easily add them to your website by copying the icon’s idiomatic HTML element, for example <i class=”fas fa-globe-europe”></i>. There’s also the possibility to download the icon in SVG format.

Font Awesome has no native support in WordPress, therefore it needs to be enabled before adding icons. Enabling Font Awesome icons for WordPress is quite simple using the Official Plugin, available for free in the WP Plugin Repository. You can also enable Font Awesome icons in WordPress by embedding a <link> element inside your website’s head section. Enabling Font Awesome using the plugin is simpler and offers compatibility with previous versions, but generates 5 server requests which could slightly affect your website’s loading speed. Embedding the link inside the website’s head generates only 3 server requests, so it’s the better option if you’re optimizing the website for loading speed.

Font Awesome icons categorized as Automotive. Plenty of very nce designed icons to choose from.

Open icon set
 

More free font based icon sets

Even if among 350 Dasihicons, 900 Material Design icons or even 1600 Font Awesome icons you haven’t found what you’re looking for, there’s no need to despair. There are more free font based icon sets available with thousands more icons. Let’s just mention a couple more collections which might be the exact set of icons for WordPress you’ve been looking for:

• Line Icons – around 2000 minimalist design icons, covering a wide vairiety of topics
• Line Awesome – more than 1300 free icons, nice design and simple implementation
• Unicons – over 1000 nicely designed free icons, variations available in premium collection
• Linearicons – around 170 free + 1000 premium crisp desigh icons