Using vector icons in PowerPoint

Using Picons vector icons in Powerpoint

A guide on how to import vector icons into PowerPoint presentations — the right way

Want to use vector icons in your next presentation, and to change the color, size and shape of the icons within PowerPoint?

Sure, you can always import icons into a PowerPoint presentation as bitmap images (JPG or PNG), but there are two big disadvantages to this:
– There is a loss of quality when resizing an icon to a bigger size,
– You cannot change the color of an icon or edit it in any way.

Luckily, Microsoft PowerPoint (2010 or newer) supports some of the basic shape manipulation techniques that we know from vector editing software like Adobe Illustrator. However, this comes with a major setback – the behavior is not the same with macOS as it is with Windows.

a) Using Windows

To be inserted into a Microsoft PowerPoint presentation, your icon (or any other vector graphic) needs to be of the Windows Enhanced Metafile format (.EMF). With the latest update, all our vector icons already include the necessary EMF files, which are compatible with Microsoft Office.

1) In PowerPoint, select “Insert pictures” and choose one of the EMF files on your computer.

Insert vector icons in PowerPoint  2) Right-click the imported icon and un-group it. You will then see the following PowerPoint dialogue box asking: “Do you want to convert it to a Microsoft Office drawing object?” Press “Yes.” This will transform the icon into a drawing object, ready to be modified.

Ungroup vector icons in PowerPoint

3) Done! Now you are able to use the icon in your Microsoft PowerPoint presentation. You can modify the vector icon the way you like.

Change color of vector icons in PowerPoint

4) To change the stroke or fill color of an icon or stroke weight, right-click the imported icon and un-group it again. This will break up the icon and let you move or change the color of any individual parts.

Insert vector icons in PowerPoint

Btw: There is a cool free shell extension for Windows users that enables thumbnails and previews for EMF files in Windows File Explorer.

 

b) Using macOS

1) In PowerPoint, select “Insert pictures” and choose one of the EMF files on your computer.

Insert vector graphic in MS PowerPoint

2) Now you can resize and change the color of the icon.

Recolor vector graphic in MS PowerPoint

What’s with changing the shape and color of individual parts of an icon when using macOS? 

Because EMF isn’t a macOS-native file format and normally EPS can’t be un-grouped, the same method does not work if you’re using macOS. PowerPoint on Windows treats EPS in a non-standard way (basically converting it to a Microsoft Office drawing object), which allows it to be un-grouped there, but not with macOS. A lot of people are impatiently waiting for that, though! See update below!

On the other hand, there is an ugly work-around where you have to download and install Apache’s Open Office (free). Start a new presentation in Open Office and import the EMF file (in Presentation mode). Right-click the icon and select Break. Save the Open Office presentation as a PowerPoint presentation. Now you can go to Microsoft PowerPoint and edit it from there.

UPDATE (Jan 25, 2018): The PowerPoint for Mac team just announced that support for SVG and icons is planned and will begin development soon. I will update this article once support for SVG is live.

UPDATE (May 13, 2018): The PowerPoint for Mac team just announced

As of April 2018, Insert Icons and SVG support are now available in Office 2016 for Mac.

To insert an icon in Office 2016 for Mac: Go to the Insert > Insert Icon. Scroll through the icons or jump to a category by clicking the name in the navigation pane at the left. Choose an icon and then click Insert at the lower right. Insert multiple icons at the same time by clicking each of them before clicking Insert. Use the Graphics Tools ribbon to rotate, color, change style or resize your icon.

To insert an SVG file in Office 2016 for Mac: Go to Insert > Pictures > Picture from file to insert your SVG images.


In case you’re looking for Powerpoint-ready vector icons you could add into your decks, you are welcome to use vector icons from Picons.me. All icon sets already include the necessary EMF files, which are ready to go with Microsoft Office.

Icons – The Only Language Everyone Understands

Picons Rocket Icons

Icons, which are sometimes called pictograms, are those little symbols you (un)consciously interact with every day. They are those somewhat recognisable signs that you click on when working on your computer, your smart phone, your car, your television or any other home appliance  —  even your toaster!

Read our complete guest post at Iconfinder‘s blog.

Icon examples #1

We are starting a series of great Picons use cases with an app we are very proud of. Ulysses is a macOS and iOS app that just received the Apple Design Award 2016.

No, Ulysses is not just a text editor. It is a writing environment, with a super slick and intuitive interface, where our icons play an essential role for the navigation and organization of writings.

ulysses_1

ulysses_2

Source: Ulysses

Used icons: Picons Thin collection

Searching for Picons with Iconjar

Iconjar is a Mac OS X app that helps you organize, search and use icons the easy way.

It is available for free €19.99.

Iconjar + Picons

All our Picons icon collections already work with Iconjar. All you need to do is to import your Picons SVG files into Iconjar and then you can search for the icons based on keywords.

But Iconjar is not only a tool to easily search through all your icons, it also allows you to drag & drop any icon into the app you are working with.

For our biggest vector icon collection Picons Thin and BasiColor, we also added an .iconjar archive, with icons organized by categories, to even easily find your desired icon.

Create your own icon font and how to use it on websites

I. Basics

There has been many techniques to use vector icons on web sites. From importing bitmap image files (usually transparent PNG’s), to vectorized SVG’s or even using web fonts containing symbols instead of typical characters. All of those have advantages and disadvantages, so the choice is not always easy.

Even though, using non-standard fonts (in general) has became a standard of web development in the recent years. Displaying icons through fonts is the same as using non-standard fonts for titles and paragraphs. Times, where web designers could choose only from 5-10 different fonts, are – luckily – over.

Picons Font

Using icons as web fonts has many advantages:

  • fonts are scalable (no quality loss with different sizes);
  • no need to care about support for Retina displays;
  • easy to apply CSS properties (color, gradient, shadows, etc.) without editing the icon itself;
  • you can use the same icon (shape) in different sizes, colors (saves time and performance);

Nonetheless, icon fonts have also disadvantages. The biggest I see is the unreliable rendering across browsers. The problem can be demonstrated with the following screenshot:

Icon font vs. SVG comparison

The other disadvantage, which is also related to inconsistent rendering, is positioning. It can be tricky to position a tiny icon into center of a circle, so it looks the same in every browser.

If you want to get more deep into this, you can find many articles with pros and cons of using icons as web fonts (Ian Feather’s Article, CSS tricks, SitePoint, etc.).

OK, enough of this. Let’s create an icon font and show how to use it on a website.

II. Creating an icon font

The first thing you need to do is to make your own personal selection of icons. It’s prefered you do that for every project individually, because including all of the icons, even if not used on a project, makes the font file larger. Carrying about loading times is still crucial for the mobile experience.

All Picons icon collections come with included SVG’s of each icon. But, we also have an own icon font with 130 selected icons, if you want to jump the step of creating your own.

There is variety of free and paid tools for creating own fonts. Specialized tools such as icomoon, Fontello, etc. are free and very easy to use. We will show the steps based on comoon’s app.

Step 1: Drag & drop selected SVG’s and create a new set

step1

Step 2: Select all the icons you wish to include in an icon font (you can select them from various sets)

step2

Step 3: Generate the Font

step3

Step 4: Rename all the symbols as you wish and define a unicode character for each (optional)

step4

Step 5: Download the generated file

step5

III. Using the icon font on a website

Your generated icon font consists of various font formats (for cross-browser compatibility) and demo files including HTML and CSS.

Step 1: Copy the CSS code in the included “style.css” to your own CSS file

The included CSS file has a predefined class for each icon, telling your browser which character in the font to use for a specific symbol. You can also apply your own CSS styles to each icon (color, shading, etc…).

Step 2: Copy the folder “fonts” to your website folder

The folder “fonts” includes your generated icon font in different formats (woff, tff, svg, eot). Be sure that the uploaded fonts are linked from the imported CSS. If placed somewhere else than “fonts/”, then correct the link direction accordingly.

@font-face {
 font-family: ‘thin_custom’;
 src:    url('fonts/thin_custom.eot?hpwvww’);
 src:    url('fonts/thin_custom.eot?hpwvww#iefix’) format('embedded-opentype’),
 url('fonts/thin_custom.ttf?hpwvww’) format('truetype’),
 url('fonts/thin_custom.woff?hpwvww’) format('woff’),
 url('fonts/thin_custom.svg?hpwvww#thin_custom’) format('svg’);
 font-weight: normal;
 font-style: normal;
 }

Step 3: Insert the icons

An icon can be inserted with the following HTML code:

<span class=“icon-notebook”></span>

Where the class name “icon-notebook” is generated from the title you gave each icon when creating the icon font. The classes are referred to styling definitions in the included CSS file:

.icon-notebook:before {
 content: “61”;
}

The styling (size, color, hover, etc) can be applied inline (inside the HTML) or to your style.css.

Your feedback (including questions) is always welcome…