Free Sources of Flat Icons to Make Your Slides and Documents more Expressive and Colourful

To return the favour, it is highly recommended to credit the sources

Title photo

Source:

www.red-nova-engine.ca

Author:

Charles Ai

Updated 2018-10-09

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.

Demo of png format

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).

Demo of svg format

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.

Vector images in iWork

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!

Finding the “green button"

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 in iWork on iPad

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. 

Vector images in PowerPoint

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. 

Vector images in PowerPoint — Design ideas

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. 

Vector images in PowerPoint 3

Modifying the colours of the vector images in PowerPoint

Let's now summarize their strength and weakness of these embedded icons.

Strength:

Weakness:


2. The 384 Free icons in one package by Elegant Themes Inc.

384 free icons in one package

Each icon has a multi-colour and a mono-colour version in the package

Strength

Weakness


3. Icons8

icons8 1

icons8 2

Strength

Weakness


4. Flaticons

flaticons

Flaticons.net provides a variety of customization for the icons

Strength

Weakness


5. Adioma

Icon database in Adioma

We can choose multiple icons from "search by visual element" area to expect results that potentially carry these components

Icon database in Adioma 2


Strength

Weakness


6. Flat-icon-design

Flat-icon-design (Japanese)

Flat-icon-design (Japanese) 2

Free download for all-dimension PNG and SVG images — amazing!

Strength

Weakness


7. Flaticon (My favourite)

flaticon 1

“Color Filter” in flaticon

"Color Filter" helps separate the monochrome and multi-colour icons in one click.

Customization of images in flaticon

This site offers the largest free icon database with flexible dimensions and formats — a must-have for all designers

Strength

Weakness


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.

Cheers!

Recommended reading