How to Create your Own Custom Icon for Pictograph Visualizations

Although Displayr has a number of built-in icons ready to use, it may happen that you want your own custom icon in your visualizations. This article will take you through the general steps to create your own icons: time to bring out the artist inside!

Requirements

Unless you're a graphic designer, you will most likely want to find an icon online to use as a template or base for your design. A quick search for your theme and ".svg" or "vector" along with "icon" is likely to throw up any number of public domain / free results. Do take care to ensure that the website you download your base image from gives you a license to use it for commercial purposes.
Vector graphics editing software. A very popular freeware option is Inkscape

Method

Step 1 - Create your Icon Images

The following are general steps for a workflow for creating your own icons. The actual steps will vary depending on the software you use, and your preferences.

Find a base icon that you like, or design one from scratch (for the brave!). Ensure it's in a standard vector format file, e.g. .svg.
Open the vector file in your preferred editing software, and create your "unfilled" icon. This should represent the state of the icon as it looks when it's got 0% worth of data to reflect. In the example below, the unfilled thermometer icon is on the left. Save this as a new .svg file.
Next, create your "filled" icon. The color used here will be fixed in the final version in your report, so you may need to create multiple versions if you want different colors for different sections of your report. This icon should reflect the 100% filled version of the image. The image on the right, below, is the "filled" version of the same thermometer - save this, too, as a new .svg file.
When you're happy with your design, it's time to upload your .svg files to a location online that's publicly accessible, e.g. in your Dropbox, Google Drive, or similar, where you can create a link that can be shared with anyone without the need to log into the location where the icon is saved. A good way to test that the icon is accessible is to upload it, generate the link to the image, and then open that link directly in an incognito browser window. If that works and the image loads, then it'll work in Displayr.

When designing your icons, it's worth considering how they get used by Displayr. The unfilled icon is displayed on screen as-is. Displayr then takes the input value(s) and cuts the filled version down to that proportion based on the height or width (depending on your direction of fill). So if your fill percentage is, say, 33% then Displayr takes 33% from the bottom of the filled icon, and places that directly on top of the unfilled version.

As a consequence of this, if you're using outlines or object borders (as in the example here where the thermometer is a "thing" that gets filled), they should be present in both versions of the image.