What is an icon?
Icons are graphics that help us understand information.
Icons or icons are found everywhere. There is a lot of visual information around us that plays an important role in our lives, although we don't even think about it. In the interface of a website, when switching on the computer or on the keyboard. We also see them on road signs, airport and logos. Icons express actions, ideas or feelings. They convey information with minimal effort, in a common and recognisable way. Icons show the basic characteristics of an object or idea, yet are very precise and clear. They do not allow for interpretation or ambiguity.
Why use icons in your design?
Icons are an integral part of navigation. Designers and developers use icons in their projects all the time. But why use icons in your design and why are they important? We will share our observations and conclusions with you. It's clear that using icons correctly doesn't mean complete success and that tonnes of users will flood to you. But you can definitely improve user experience and engagement.
Icons make navigation easier
Icons play an important role in improving navigation on a website:
Header section: Icons placed in the header section can effectively highlight the key services offered by your website. They help users move smoothly from one page to another without losing the sense of location.
Services section: If your brand provides different services and sub-services, strategic use of icons can facilitate smooth navigation between them. This section drives revenue, so it's important to choose icons that match the services.
Product Page: The product page is an important section of the website that directly impacts revenue. Placing icons gives users additional information about the product, such as warranty or free shipping information, without requiring them to visit other pages.
Footer: Once a user is engaged, they often browse the footer to connect with your brand or learn more about it. Using icons in this section can grab their attention and direct them to your social media profiles or app download pages.
Icons explain a feature
Icons help you indicate functions such as logging out, switching navigation menus or checking items in your shopping basket. This is the most convenient and intuitive way to do it. Oh, and a large text description would look visually questionable in this case.
Icons convey a mood
The difference between the success and failure of brands can depend on the mood you build around them. Using icons in web design creates an overall picture. For example, icons with sloppy shapes and bright colours convey a positive and cheerful brand mood. Icons with simple geometric shapes can indicate a brand's modernity and minimalism.
What is the best icon format? Vector or raster? Why?
The choice between vector and raster icon formats depends on specific requirements and conditions of use. Both formats have their advantages and disadvantages.
Vector icons
Vector icons are digital images created using mathematical equations and geometric shapes. They are made up of individual shapes and lines and can be easily edited and customised to suit your needs. These icons can zoom in and out without losing quality or pixelation. They are well suited for creating crisp and clean graphics that will look good in any size.
Features of vector icons
- Scalability: Vector icons are resolution-independent, meaning they can be scaled up or down without loss of quality. They are based on mathematical calculations of points, lines and curves, which allows them to scale smoothly to any size.
- Flexibility: Vector icons can be easily modified, edited and customised. Colours, shapes and sizes can be changed without loss of quality.
- Versatility: Vector icons are well suited for different screen sizes and resolutions, making them ideal for responsive design and multi-platform applications.
- File size: Vector files tend to be smaller in size compared to bitmap images, making them efficient to store and faster to download.
Raster icons
Bitmap icons are made up of very small pixels that form a larger image. They are great for detailed and realistic images. However, when you zoom in, you can lose quality and the image becomes pixelated. Because of this, you need to create separate bitmap icons for each size. This can be time consuming and limit their flexibility.
Features of raster icons
- Detail and Texture: Bitmap icons are created using pixels and are great for creating intricate detail, textures and realistic visual elements.
- Photographic elements: Bitmap icons are suitable for icons that contain photographic elements or complex shading.
- Compatibility: Bitmap icons are widely supported by various platforms and software applications, making them easily accessible and usable in a variety of contexts.
- Specific dimensions: Bitmap icons have specific dimensions in pixels, which can be useful in cases where icons need to precisely match dimensions or pixel grids.
In general, vector icons are preferred due to their scalability, flexibility and smaller file size, making them suitable for most digital design scenarios. However, bitmap icons are better at conveying intricate details and are often used for realistic or photographic elements. Ultimately, the choice between vector and raster icons depends on specific design requirements, target platforms and desired visual results.
How does the licence work when using icons from free resources?
When you use icons it's important to understand the licensing terms to make sure you're using them correctly and legally. We'll cover the most common types of licences you may encounter:
Creative Commons (CC)
Icons with a Creative Commons licence have specific permissions and terms of use. The specific type of CC licence can vary, but here are a few of the most common:
- CC BY (Attribution): You are free to use icons as long as you give credit to the author.
- CC BY-SA (Attribution-ShareAlike): You can use icons and modify them, but you must distribute your modifications under the same licence.
- CC BY-ND (Attribution-NoDerivs): You can use the icons as they are without making any changes, but you must attribute authorship.
Public Domain
These are icons that are in the public domain and are not copyrighted. They can be used freely, without attribution or restrictions. However, you should always check the status of the icon and any additional terms and conditions associated with it.
Royalty-Free
Copyright-free icons usually require payment or attribution to use them. This way you get the icon under licence and are free to use it. You can use icons without additional fees or restrictions. It all depends on the specific terms of the licence.
When using icons from free sources, it is important to read and understand the licence terms that are stated on the site and the icon description. Pay attention to requirements such as attribution (attribution), restrictions on commercial use, or the need to distribute modifications. If you are unsure of the licence terms or have questions, contact the author for clarification. Compliance with licence terms will allow you to use icons from free resources in your projects confidently and legally.
Top 15 best sites with free icons
1. ICONS8
ICONS8 is a useful resource with free icons. With an extensive library covering a variety of themes, you'll be able to find icons to suit your needs. They come in a variety of styles, including flat designs and hand-drawn icons, allowing you to choose the one that suits your project. The icons are available in different sizes and formats such as PNG and SVG. You can even customise the icons by changing the colours and sizes. The site has a handy search function that makes it easy to find the perfect icons.
2. Smashing Magazine Freebies
The Smashing Magazine Freebies section is a valuable resource for designers and creatives looking for high quality icons with variety, quality, regular updates, support resources and community collaboration. The Freebies section covers a wide range of icon categories including social media, web, mobile and more.
Smashing Magazine often supplements its offerings with supporting resources. These resources may include tutorials, articles, or inspirational design ideas related to the featured icon sets. Additionally, Smashing Magazine encourages contributions from the design community.
3. Freepik
Freepik combines a large collection of icons, customisable options and a user-friendly interface. With the variety, designers can find icons suitable for any project, regardless of industry or style. In addition, Freepik offers icons that can be customised and edited. One can change the colours, sizes and other icon design elements to suit the requirements of a particular project. The platform has an easy-to-use search engine that makes it easy to navigate through the large collection and quickly find the icons you need. Be it searching by keywords or browsing through categories.
4. Flaticon
Flaticon is a leading platform that offers a wide range of icons. It features a large library, universal file formats, Photoshop integration, advanced search capabilities, customisation options, licensing flexibility, organised icon sets and a thriving community of authors. The integration of a dedicated plugin for Adobe Photoshop simplifies the workflow, allowing designers to access and import icons seamlessly.
5. Futuramo Icons
Futuramo Icons offers a collection of stylish and modern icons. With customisable styles and support for Icon Font and SVG formats, designers can flexibly integrate icons into their projects. In addition, the platform provides icon management and collaboration tools, as well as advanced search and filtering capabilities to efficiently find icons. Futuramo Icons features regular updates, easy integration with other Futuramo applications and a wide range of licensing options.
6. Shape.so
Shape.so is a unique resource that provides customisable illustrations and icons. Designers can change colours, sizes and styles to create icons perfect for their projects. With a library of thousands of icons and illustrations, Shape.so offers a wide range of options for designers seeking flexibility and customisation in icon creation.
7. Phosphor Icons
Phosphor Icons offers an extensive collection of over 13,000 icons featuring a distinct and consistent visual style. The icons are available in a variety of formats including SVG, React, and Vue, making it easy to integrate them into various design projects. Phosphor Icons is known for its attention to detail and the ability to customise colours and sizes to suit specific design needs.
8. Iconfinder
Iconfinder is a popular platform with an extensive library of over 4 million icons. It offers a wide range of styles, categories and formats, making it easy for designers to find the perfect icons for their projects. Iconfinder provides advanced search and filtering capabilities, as well as customisable icon sets and licenses suitable for different purposes.
9. Streamline Icons
Streamline Icons is an extensive collection of over 30,000 icons covering a variety of categories and styles. The icons are carefully crafted to ensure uniformity and visual appeal. With customisable styles, search functionality and compatibility with popular design tools, Streamline Icons is a comprehensive resource for designers looking for high quality icons.
10. Google Fonts Icons
Google Fonts Icons offers a library of free, open-source icons that can be easily integrated into web projects. With a wide selection of categories and styles, designers can find icons that complement their typography. Google Fonts Icons are scalable and customisable, providing flexibility in size, colour and other attributes.
11. Font Awesome
Font Awesome is a widely used icon library that offers an extensive collection of icons for website and app design. With over 6,000 icons and a variety of styles and categories, Font Awesome is a versatile resource for designers. It offers easy integration options, icon customisation and compatibility with popular frameworks and platforms.
12 The Noun Project
The Noun Project is a unique platform dedicated to visual symbols and icons. It offers an extensive collection of icons created by a global community of designers. Noun Project icons are characterised by simplicity, clarity and universal recognisability, which allows them to be used in a wide range of applications.
13. Iconmonstr
Iconmonstr is a resource that provides a large collection of single-colour icons in a clean and minimalistic style. With thousands of icons available in various categories, designers can find icons suitable for different projects. Iconmonstr offers icons in PNG and SVG formats, making them easy to customise and integrate.
14. Feather Icons
Feather Icons offers a collection of beautifully designed open source icons characterised by simplicity and elegance. Focusing on minimalism, Feather Icons offers a library of over 280 icons that are easily customisable and scalable. The icons are available in a variety of formats and are suitable for a wide range of design projects.
15. Tabler Icons
Tabler Icons offers an extensive set of open source icons designed for web applications. Tabler Icons contains over 4,700 icons in various categories and is a one-stop resource for designers. The icons are available in SVG format, making them easy to customise and integrate into web projects. Tabler Icons is characterised by a clean and modern design.
Conclusion
Quality icons can add style and visual interest to a design. What's more, when used correctly, good icon design can speed up user interaction. Choose quality icons from the very beginning of your project. This way, you'll save yourself from headaches and won't waste time. This can be a tough decision, especially because there are a huge number of them out there, and new icons come out every month.
Look for icon sets with a wide range of icons that will meet your needs. You won't need 10,000+ icons, but try to find at least 250+ basic icons that you will almost certainly need.
We've shared with you a top of 15 free icon sites for designers that will help you in this endeavour. Each of these resources offers unique features, a diverse set of icons, and customisation options to meet the needs of designers looking for quality and free icons for their projects.
