7 resources with symbols and icons for improving your knowledge base

Icons and symbols improve your help content's readability. Instead of writing "the button with the arrow" you can add icons of those buttons.

Icons and special characters are frequently used for indicating a specific element of a user interface (UI). For example, in the image below, you can see that the Google help center team added a special icon in step 2 so that users can easily find the Delete icon on the UI.

There are three main types of icons that you can use for improving your knowledge base:

HTML symbols: Very easy to use just like fonts but their appearance can vary depending on the user's browser and operating system.

Emojis: Apart from the faces and hand gestures we all use for fun when we chat, there are quite a few emojis that can help you explain something.

Material icons: This is the best type of icons but they require some technical work in order to add them to the site/CMS where you publish your knowledge base content.

1. W3Schools: The absolute HTML resource

W3Schools is the ultimate resource for HTML special symbols. Simply copy and paste symbols from this site to an HTML page. The list contains complete Math, Greek, currency, arrows, and symbols references.

Go to W3Schools ↗

Screenshot of W3 Schools

2. DEV.to article: How to add Emoji's in your website, using HTML, CSS or JavaScript

This is a great resource for adding emojis into your website using HTML, CSS, or Javascript.

Go to the article ↗

Screenshot of DEV

3. Google Fonts: Material icons

Material icons are font equivalents, and they can only be used if you upload them to the website. They can't be copied and pasted into the text like emojis.

The Google Fonts library includes free and open source font families and material icons and it's actually one of the top resources for material icons across the web.

Go to Google Fonts ↗

4. Bootstrap Icons

Similar to Google Fonts, the icons on this website are not something you can just copy and paste.

Go to Bootstrap Icons ↗

Bootstrap Icons screenshot

5. Font Awesome: Icons + popular logos

Another excellent resource for icons. They have over 1,000 icons available on the Free version and over 6,000 more on the Pro. We really liked the fact that they also have commercial icons such as symbols and logos of various popular brands and companies.

Go to Font Awesome ↗

Font Awesome screenshot

6. Octicons: GitHub's icons

This is a set of icons by GitHub. If you use GitHub, you'll recognize those.

Go to Octicons ↗

Octicons screenshot

7. Media Temple: Create your own icons

If you are more interested in creating your own icons, you can check out this detailed tutorial on how to create and implement icon fonts.

Go to Media Temple ↗

Media Tempe screenshot


Related topics
Author