Icons, also known as pictograms, can be found everywhere on the internet – on websites, in apps, in chat programs or on online shops. The small icons break up text and content, make navigation easier for users and often have a descriptive function. Thanks to their versatility, icons are indispensable visual communication tools.
If you search the internet for suitable icons when designing your own website, you’ll soon find what you’re looking for. Lots of platforms offer pictograms with different designs. These can be filled out icons or icons with an outline. Plain and multicolor pictograms are also common categories. Part of the selection on these platforms can generally be downloaded free of charge, subject to compliance with the licensing requirements. Other icons are subject to a fee.
In this article, we will briefly introduce some of these platforms and answer some of the questions that come up when using icons from the internet, including: what are icon fonts? How are licenses for icons regulated? And how do I embed icons on my website?
Icon fonts: widespread, scalable and user-friendly
Pictograms that can be downloaded are usually what are known as icon fonts – the most commonly used icon type today. These icon fonts are basically web fonts, i.e. digital fonts. Instead of letters or numbers, these icon fonts use symbols in the font. Technically integrated, however, they are just like normal web fonts. Because icon fonts are usually vector-based, they can be scaled graphically. The characters can be enlarged and reduced without losing resolution, their colors can be adjusted and they can even be rotated. Icon fonts are integrated into the source code using CSS.
Icon fonts are scalable, making them ideal for use on mobile websites. However, their main advantage is that websites that use them load faster. This is because icon fonts only load the character set and the corresponding CSS file instead of entire graphics or many large icons. This reduces the number of requests to the web server and thus the time it takes to load the page.
A disadvantage of icon fonts is that, as is sometimes the case with many fonts, they are not displayed to the same quality in all browsers. This may be more noticeable for smaller or more detailed pictograms. Although it is possible to change the colors of icons, creating multicolored icons often requires a great deal of effort for designers.
Info:
Where can you find good image material and attractive fonts for your website on the internet? Read our two blog articles on the subject:
Looking for images for your website? Here’s what you need to know
For an easy-to-read website, fonts are your friend
Here you can find free icons to download
Below we have compiled an overview of some well-known icon databases. You can find heaps of others online. Many of these platforms offer both paid and free pictograms for download. Most provide icons grouped together as icon packs, but in some cases, users can also purchase individual icons.
- The Noun Project
The Noun Project, a Los Angeles-based platform, is a comprehensive collection of icons of all kinds. If you’re looking for pictograms for your website, you can choose from over three million icons to download and use under a Creative Commons License. - flaticon
Flaticon’s icon collection is also very extensive, with around 3.5 million pictograms. With a free license, however, only limited use of the platform is possible. For example, free icons can only be downloaded in PNG format. However, this should usually suffice for non-professional users. - Dribble
Dribble is much more than just an icon collection. On the well-known platform, designers from all over the world present their work and inspire each other. There are icons, fonts and other graphic objects available for download – they are not free to use, but a visit to the versatile platform is definitely worthwhile. - Font Awesome
The Font Awesome platform, on the other hand, is well known for more than just its popular free icon collection. Its very own, extremely user-friendly content delivery network (CDN) is also very popular, allowing icons to be easily embedded on websites. - iconmonstr
The founder and operator of the iconmonstr icon collection is German designer Alexander Kahlkopf. His platform offers several thousand icons for free download under its own license and continues to grow. - ICONS8
On ICONS8, users can choose from over 10,000 icons. They are free to download, provided that when using them ICONS8 is linked. In addition to pictograms, the range also includes photos, illustrations and even music. - Vecteezy
Another very comprehensive and worthwhile source for designers is Vecteezy. In addition to icons, users can also access heaps of pictures and movies available for free download. - GraphicRiver
Graphicriver is part of the Australian design and multimedia network Envato, which operates numerous digital marketplaces (including codecanyon.net and themeforest.net). On Graphicriver, designers from all over the world provide icons, in addition to illustrations and graphics. Unlike other platforms, however, all downloads are subject to a fee. - Linearicons
The founder of Linearicons is an icon font designer who works under the pseudonym “Perxis.” Free icon packs can be downloaded from the platform under a Creative Commons License. All that is required is for the platform and operator to be linked. - Streamline
Streamline features more than 100,000 icons for designers to download, as well as emojis and other graphic elements. However, only some of the items on the platform can be used free of charge.
Copyright: what’s the deal with icons from the internet?
In principle, all content on the internet is protected by copyright. This applies to icons, photos, fonts and music. Copyright protection expires in Switzerland 50 to 70 years after the death of the creator.
If copyrighted content is downloaded exclusively for private use, this is legally permissible for private use in Switzerland. This even applies to downloading from fundamentally illegal platforms. However, uploading protected content is prohibited – including for private use. And it doesn’t matter whether the intention is to make a profit or not.
Anyone who wants to download an icon pack and use the icons on their own website, i.e. upload them, basically requires the corresponding permission from the creator (in the case of pictograms, usually the designer). Permission is granted in the form of a license. Standard licenses are usually used when downloading icon packs. These determine how and for what price the icons may be used – whether commercial use is permitted, for example.
If you want to use an icon for purposes that go beyond the usage rights defined in the standard licenses, you need an extended license that governs the additional types of use in detail. While standard licenses are often issued free of charge, extended licenses are usually subject to a fee. Many of the icon platforms mentioned above allow the use of icons both as part of free standard licenses and as part of paid extended licenses.
How do I integrate downloaded icons into my website?
Most of the platforms presented above allow you to download icons as vector-based SVG files as well as PNG image files. In common content management systems (CMS), both file types can usually be integrated. With SVG data, the display quality is higher, but PNG files often serve their purpose. On some platforms, you can also use hexadecimal color codes to color the icons in any shade even before downloading. This ensures that the colors match the design of your website.
Integration into your website can be done either manually or using a plugin. Some icon providers, such as Font Awesome, offer their own plugin that makes it extremely easy to copy icons to the source code. Because this makes changes to the code, it is important that you make a backup copy of the code first. Tip: some CMSs, including WordPress, offer a limited number of custom icons that are very easy to implement. So, for example, if you’re building a website with WordPress Builder you can access the pictograms available there.
Web projects with WordPress are very easy to set up and manage at Hostpoint, just like websites with other CMSs.
