How to import custom icons to your Pictogram visualization

There are a number of icons that are already included in our Pictogram template by default. However, you can add custom icons to your Pictogram visualization by following either one of these two approaches: using a combination of design software and a text editor, or using a browser inspector. We'll walk you through both options in this help doc.

How to import custom icons using design software and a text editor

1

Find and download an SVG of the icon you would like to display in your visualization. Free sources for icons include undraw, flaticon, The Noun Project. 

2

Open your SVG(s) in Figma, right click and select Copy/Paste > Copy as SVG 

3

Paste this into a text editor. The copied contents should looks something like this:

4

In your text editor, copy the path. That's everything within the quotation marks in the screenshot above.

5

In Flourish, head over to the Icons tab of your Pictogram visualization and paste the path into one of the cells in column B.

6

Make sure the Icon height and Icon width in columns C and D match the height and width supplied in the SVG code. You can find these values in the code you've copied earlier.

7

Update your icon IDs to match the icons they are displaying.

WARNING: Make sure that you have bound the right column under Icon ID in the Data tab, and that you use the same ID in both the Icons and Data tabs.

8

If your icons don't appear, look cropped off, or aren't centered, you might want to edit the SVG with an online editor such as this one. Here you can change the viewBox (the position and dimension of the SVG), the alignment of the element, and much more. Making changes to some of these attributes should fix any issues with your icons.

How to import custom icons using your browser inspector

To speed things along, you might want to copy the icon path directly from the browser. We've gone over the steps to achieve this in the video below.