Looking for eye-catching icons for your website? Find them here

Looking for eye-catching icons for your website? Find them here

Icons on websites simplify navigation, break up the content and are indispensable design tools. Lots of platforms provide free pictograms. Find out here how to find the right icons for your website.

Mauro Landolt Mauro Landolt · Head of Communication

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.

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.

Icons like these can be found in their thousands on platforms such as The Noun Project, flaticon and GraphicRiver.

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.

Visualization of an email inbox in a laptop screen with Cloud Office icon. Visualization of an email inbox in a laptop screen with Cloud Office icon.

An e-mail address with your own domain

Discover the new e-mail packages with Cloud Office from Hostpoint. The domain of your choice for your email addresses, generous mailbox and Drive storage, various Office tools and much more.