How to easily add custom icons in Displayr
When creating dashboards and online reports, infographics and pictographs are often used to present information in ways that aid the audience’s thinking process. The idea is to grab the readers’ attention, and help them process and understand the visualization faster. In fact, humans understand images instantly, whereas we have to work to process words. It is believed that the human brain can process images up to 60,000 times faster than words.
We know that one size does not fit all. Within Displayr there is the option for you to add your own custom icons into your dashboard. For the more technically minded, the following blog describes how to add icons to dashboards using font awesome. For those less technically-minded, the rest of the blog discusses how to create custom icons using PowerPoint. And finally, how to insert them into a Displayr document as Pictograms with just a few clicks.
Where to start
First, you need to find an icon and you can do this by searching for one online or opening a blank PowerPoint document, and, in the menu ribbon, click on Insert > Illustrations > Icons. There are thousands of websites out there with icons. If obtaining an icon from an online source, do not forget to adhere to the licensing terms and conditions of the website that you get it from (which may include purchasing a license for use). Download or save your icon to your system in PNG (Portable Network Graphics) format to preserve the background transparency (jpg format removes transparencies and can distort the clarity of the icon). Back in PowerPoint, you can import the icon by selecting Insert > Images > Pictures.
To personalize the icon you can:
- Group the icon with a shape(s)
- You can change the color of the icon, maybe set the color to the theme of the dashboard
- You can adjust the transparency
To group all objects together, the easiest way to select multiple objects on a slide is to hold down the Shift key and start clicking. Alternatively, to select objects that are hidden, stacked, or behind the icon, click outside the icon and drag the mouse over the objects, or you can open the Selection pane by clicking on Home > Editing > Select > Selection Pane. In the Selection Pane you can select, multi-select, show, hide, or change the order of objects. Then, if you right-click and select Group > Group to group the objects together. To Save the icon as a picture, select the icon and right-click selecting Save As Picture saving the file as a PNG. The example below shows how easy it is to customize images to create an icon.
Setting up in Displayr
In Displayr to create a custom single icon Pictograph select Insert > Visualization > Pictograph > Single icon. In the Format > Icons > Icon select (Custom Icon). Next, you can enter the URL to the image file you want to use in Icon URL. The following image-hosting site PostImage easily lets you upload an image and create a direct link to the image. Imgur is one of the most popular image-hosting sites. If your image is not hosted on a web server, you can use public Dropbox links.
One important point to note, unlike the built-in icons in Displayr, you will not be able to recolor the custom icons. To get around this, you will need to use images with different colors for the filled and base icons. As a result the images should be of the same size, but they can differ in more than color.
The custom icon shown above was created using the two icons created in PowerPoint below:
Please note, if no base icon URL is provided, the unfilled side of the icon will be blank.
Finally you can choose the Direction of fill for both built-in and custom icons. For the example above the Direction of fill was set to 'From left', other options include 'From right', 'From bottom', 'From top', and 'Radial'. The last option is particularly useful for circular icons.
With only PowerPoint and a few clicks, you can now create custom icons and import them into Displayr. Custom icons are not just limited to being used as pictographs, they can be used as buttons, labels, menus, and section headers.