Making presentations and writing documents have become fundamental skills for all students and teachers. While watching the slide shows or reading the pages, it would be a torture to endure an entire page of plaintexts, bullets, and numbers. Small images (or icons), usually with specific semantic meanings, can significantly enhance the readability of our pages and thus making them much more appealing to the audience. Yet, chances are we find it so time-consuming to discover a bunch of well-designed, customizable icons that can answer the exact purpose of our contexts. In this short article, I would lead you into 7 free online sources of flat icons that can potentially relieve you of that anxiety.
Our friends: PNG and SVG
In adding images into our slides or documents, we often expect them to be (1) without background (or with transparent background), and (2) entirely resizable and would not become blur while scaling. For icons, these two properties are even more critical, as no one would like to see a beautiful icon with an indelible background whose colour is not in concert with the slides. Thus, here comes the need to recognize two image formats that are essential to icon-searching.
The PNG format (with file extension .PNG or .png)
The PNG format supports lossless data compression, making them ideal for frequent compression and decompression during Internet transmission. However, its largest merit is that it enables transparent backgrounds for images, thanks to its provision of an alpha channel (scale of transparency) for every single pixel.
In Google image search results, those with a chess-board-like background are PNG images.
With a transparent background, a PNG icon can perfectly blend into the page layout without interfering with the real background colour or other page elements.
The most common dimensions of online PNG icons are 32×32, 64×64, 128×128, and 256×256 pixels. The medium-sized ones (64×64 and 128×128) can serve the purposes very well on our keynote presentations and small-sized posters or flyers.
If you need really huge icons or images, you will have to go for either larger PNG files (256×256 or 512×512), or choose the SVG format images.
The SVG format (with file extension .SVG or .svg)
The SVG format is a vector image format for two-dimensional graphics with support for interactivity and animation. By "vector image," we mean that, compare with bitmap images (with the extensions of .jpg, .jpeg, .gif, and .png), the SVG images would never lose any of its details while being scaled, because each of them is composed of a fixed set of shapes rather than pixels (the latter becoming blurred if we zoom in).
No matter how large you scale them into, vector images (with SVG format) will maintain their shape and never become a mosaic. Source: Wikipedia
This format also supports lossless data compression and thus has been widely used on the Internet and the printing industry, especially for large-scaled icons and images.
Due to its fluid resizability, SVG format images don't necessarily have a default image dimension for display, so basically, you can paste it anywhere with any dimension you want. In your hard-disc, however, they do have a fixed file size. So no worries, they won't eat up your hard-disc storage if they are scaled to cover an entire page.
1. Built-in vector icons in iWork and Office suite apps
Before diving into web-based sources, let's exploit the most frequently used productivity tools first — the apps in iWork (on Mac) and Office (on Windows and Mac) Suites. It turns out that there are already quite a few vector images WITHIN those apps at your disposal.
In Pages, Numbers, and Keynote on Mac, click the green square button in your toolbar, and then you can see a pool of scalable icons with a bunch of categories ready to be dragged and dropped into your document. Their colours can also be changed once they settle on your page.
The button in Keynote to unveil the hidden treasure
If the green square button doesn't appear in your toolbar, RIGHT CLICK at blank space of the toolbar –> CHOOSE "Customize Toolbar" –> DRAG the green square button into the toolbar. And there you have it!
Where and how to retreat the "green square button"
For iPad users, these images and icons can also be found under the "Add" button (the cross), and their colours can be modified under the "Brush" button.
Adding vector images from Pages on iPad
In Windows' version Office apps, such as PowerPoint, CHOOSE "Insert" –> CLICK "Icons" button, and you can choose multiple icons from the icon menu.
Adding vector images/icons from PowerPoint for Windows
After confirming your choices, interestingly, you can find some "Design Ideas" on the right — a quite handy function that can potentially save a lot of time for us to place the icons on the right places.
The "Design Ideas" feature can automatically predict the layouts of the images.
Lastly, by choosing each image, you can change its colours with or without contours (strokes) around it, or add shadows or reflections in the "Graphics Effects" button.
Modifying the colours of the vector images in PowerPoint
Let's now summarize their strength and weakness of these embedded icons.
- Can be used within the apps right out of the box
- Can be dragged and dropped easily into our slides or documents
- Colours and other styles can be easily changed within the apps
- All icons are monochrome without any details
- Limited choices, usually only one icon for each concept/object
- Inconvenient to export for use by other 3rd-party apps
2. The 384 Free icons in one package by Elegant Themes Inc.
- Source: https://bit.ly/22d05zk
- Payment model: Free
- Formats: PNG, AI, EPS, PDF
- Dimensions: 64×64, 128×126 pixels
Each icon has a multi-colour and a mono-colour version in the package
- Package download
- Uniform design style
- Both multi-colour and mono-colour versions available
- No searchability. You have to go over every icon to find what you want
- Very limited number of icons (<400)
- Colours of monochrome icons can't be changed
- Source: https://icons8.com
- Payment model: Freemium
- Image formats: PNG (Free download), SVG, EVS, PDF (for paid accounts, USD 19.90/month or 199/year)
- Dimensions: 50×50, 100×100 pixels (larger ones for paid accounts)
- A fully searchable engine
- Both multi-colour and mono-colour versions available.
- Customizable colours of monochrome icons
- Each icon has multiple versions of design styles following guidelines of all mainstream operating systems (iOS, Android, Windows), making the site a huge treasure house for designers on different OS platforms.
- Provides HTML CDN for each icon to ensure easier website embedding.
- Has its own App on Mac and Windows, icons from which can be dragged and dropped directly into Photoshop and other apps.
- A moderate number of icons (fewer than 80,000, most of which are the same icons with different styles)
- Only 2 small dimensions (50 px & 100 px) available for free use.
- Source: https://flaticons.net
- Payment model: Free
- Image format: PNG only
- Dimensions: 16×16, 24×24, 32×32, 48×48, 128×128, 256×256
Flaticons.net provides a variety of customization for the icons
- Ample choices of dimensions, sufficient for most scenarios (slideshow, website, or document pages)
- A wide range of icon styles can be modified, including padding, background shapes, and colours of the icon and the background.
- Poor searchability, the search engine doesn't function well.
- A small number of icons (a bit more than 2,500)
- Single design style
- All icons are monochrome. No multi-colour icons.
- Source: https://adioma.com/icons
- Payment model: Freemium
- Formats: PNG, Base64: Free download; SVG, PDF: for paid accounts (USD 39 or 69 or 300 per month)
- Dimensions: Free: 32×32, 64×64, 128×128; Paid; 256×256, 512×512 pixels
We can choose multiple icons from "search by visual element" area to expect results that potentially carry these components
- Nice searchability, featuring a unique "Search by visual element" function, enabling users to use choose from a bunch of default icons to search for more icons.
- Customizable colours for monochrome icons.
- Can recommend icons in the same category as the one you are browsing
- Single design style
- All monochrome, no multi-colour icons
- Source: http://flat-icon-design.com
- Payment model: Free
- Formats: JPG, PNG, SVG
- Dimensions: 16×16, 32×32, 64×64, 128×128, 256×256, 512×512 pixels
Free download for all-dimension PNG and SVG images — amazing!
- Free SVG option (surprise!).
- A wide range of dimensions to choose from.
- Each icon has 7 options to choose from, including 3 coloured backgrounds, 3 transparent backgrounds, and one with a 45º flat shadow effect.
- The website is in Japanese, therefore a Google Translator-like tool is perhaps necessary for those can't read the language.
- Although the search engine seems to support English, search results from English entries differ from those from Japanese inputs.
- Very limited number of choices. Fewer than 600 icons in total.
7. Flaticon (My favourite)
- Source: https://www.flaticon.com
- Payment model: Freemium (Paid users can access to better-designed "Premium icons" and packages which account for 1/3 of the total number. )
- Formats: PNG, SVG, EPS, PSD — All free for download!
- Dimensions: 16×16, 24×24, 32×32, 64×64, 128×128, 256×256, 512×512 — Again all free for use!
"Color Filter" helps separate the monochrome and multi-colour icons in one click.
This site offers the largest free icon database with flexible dimensions and formats — a must-have for all designers
- Largest database of free icons (> 1 million) available in all main-stream formats and a full range of dimensions.
- High level of searchability, with search prediction feature.
- Mono-colour and multi-colour icons both available and can be separated in search results through a "Colour filter".
- Provides both Package download (login required) and individual icon download (login not required).
- Offer "My icons collection" to store selected icons and enable users to download them in one click
- Colours of monochrome icons can be changed.
- Free icons are quite sufficient to cope with normal design needs.
- A bit complicated interface.
- Some ad windows may pop up at times in the background.
Thank you very much for your reading! Feel free to leave a comment below or send me a message of feedback from here. You can also find the links of my social network at the bottom of the page.