Support Centre

Search

Use an icon chart in your design

Renée VG
Renée VG
  • Updated
Available on the following Venngage subscription plans: Free, Premium, Business and Enterprise.

Icon stat charts are perfect for representing simple demographic statistics or more complex data in an engaging style. Choose from Icon Row, Icon Grid, Icon Column or Icon Bar charts to add to your design canvas. 

Add an icon chart to your design

Click Charts in the left sidebar. 

Select from Icon Row and Icon Grid, which are perfect for simple stats and data.

In the Venngage Editor, a design page with a light blue background is open, with some black text as a heading and a large pen nib icon at the bottom. A user clicks on Charts in the left sidebar and scrolls down, then selects an Icon Row chart and clicks on it. It appears on the design canvas. The chart has one row of five repeating icons, a simple silhouette of a person. The user deletes the chart and selects Icon Grid from the Charts gallery in the left sidebar; the chart appears on the design canvas. It looks similar to the Icon Row chart, but it has three horizontal rows.

 

Scroll down to add an Icon Column or Icon Bar chart.

In the Venngage Editor, a design page with a light blue background is open, with some black text as a heading and a large pen nib icon at the bottom. A user clicks on Charts in the left sidebar and scrolls down, then selects an Icon Column chart and clicks on it. It appears on the design canvas. The chart resembles a typical column chart, with three columns of different heights, but each of the columns is represented by the same repeating icon (respectively), rather than a simple rectangular column of a single color. The user deletes the chart and selects I con Bar from the Charts gallery in the left sidebar; the chart appears on the design canvas. It looks similar to the Icon Column chart, but, as with the other chart, this has three bars that are represented by repeating icons for each bar, rather than rectangular bars of one solid color.

 

Click on the chart to add it to your canvas.

Customize your icon row or grid chart

Resize and reposition

Move the chart to the position you want on the design canvas. 

Change the dimensions of the chart with the bounding box (click and drag to resize). 

Change the fill value

Icon charts show two colors to indicate the value.

The first fill color is controlled by the Fill %.

Click the Fill % drop-down and change the percentage to change the number of icons with the first color fill in your chart. 

In the Venngage Editor, a design page with a light blue background is open, with some black text as a heading and a large pen nib icon at the bottom appears in a partial view. A user clicks on an Icon Row chart on the canvas to select it. The chart appears with one row of five simple icons that show a person in silhouette; the first 2 icons are dark blue, while the rest are a lighter blue. In the top toolbar, different tools for customizing the display of the chart appears. The user clicks on the Fill % to open a drop-down and changes the number from 25% to 48%. The user then changes the Icons per Row from 5 to 15. This causes the arrangement of the chart to change: the icons themselves become smaller, and the first 8 icons are now dark blue, with the remainder appearing in light blue.

Change the number of icons

Icon Row and Icon Grid charts can be customized to display different numbers of icons (the fill will stay the same, based on the percentage you select).

In the Venngage Editor, a design page with a light blue background is open, with some black text as a heading and a large pen nib icon at the bottom appears in a partial view. A user clicks on an Icon Grid chart on the canvas to select it. The chart appears with three stacked rows of simple icons that show a person in silhouette; each row has 6 icons across, and the first 9 icons are dark blue, while the rest are a lighter blue. In the top toolbar, different tools for customizing the display of the chart appears. The user clicks on the Fill % to open a drop-down and changes the number from 50% to 47%. The user then changes the Icons per Row from 3 to 6, and the Icons per Column from 6 to 7. This causes the arrangement of the chart to change, and the number of icons in each row to change, as well as the number of rows to increase, and the icons themselves become smaller.

 

Select the chart. Use the drop-down menus to change the number of icons per row in an Icon Row chart, and the number of icons per column and row in an Icon Grid chart. 

A partial view of the Venngage Editor shows the top of the design canvas and an Icon Row stat chart with 5 simple icons of human silhouettes. The user changes the Icon per Rwo from 5 to 10, causing the colors of the icons to change; initially, 4 of the 5 icons appeared in dark blue, with the fifth icon in light blue; now, 7 of the 10 icons appear in dark blue and the three final icons at the end of the row appear in light blue.

Resize the chart to change the spacing between the icons in the chart. 

Change the colors of your icon chart

Icon Row and Icon Grid charts have two colors determined by the fill value (%). The first fill color is equal to the fill value and the remainder is represented by the second fill color. 

These colors appear as Color Tool icons in the top toolbar when you select the chart. 

Select your chart, then click on the color you want to change. Use the Color Tool widget to adjust the color to your liking; click the 'x' in the top right corner of the widget, or anywhere on the canvas, to save your changes and close the widget.

In the Venngage Editor, a partial view of a design page with a light blue background, and some black text as a heading, appears. An Icon Grid chart appears on the canvas, with 3 rows of icons with 7 icons in each row. The icons represent simple human silhouettes, in two different shades: dark blue and light blue. A user selects the chart and clicks on Color Fill 1 in the top toolbar, which appears as a dark blue tile the same hue as the darker blue icons. In the Color Tool widget, the user clicks into the color wheel to selects a new color, then clicks a color tile under the Swatch Colors and then uses the light-dark slider next to the color wheel to adjust its black value. The color of the icons is now a dark teal. The user clicks on the design canvas to close the Color Fill 1 widget, then clicks on the tile that appears next to it in the top toolbar, for Color Fill 2. This tile is the same color as the light blue icons. The user clicks on the same teal color swatch under Swatch Colors in the Color Tool widget, then uses the opacity slider to make the color more transparent, making those icons appear lighter on the design canvas.

Change the icon image

Double-click the icon chart. You can also click once on the chart to select it, then click Replace Icon in the top toolbar.

Scroll through the icon gallery and choose a new icon; or enter a search term to narrow your choices.

On a light blue design canvas in the Venngage Editor, a user selects an Icon Grid chart with three rows of 7 icons of simple human silhouettes. The user clicks 'Replace Icon' in the top toolbar and the Replace Menu opens in a panel from the left sidebar, displaying a gallery of icon thumbnails. The user scrolls through the gallery and then enters 'marketing' in the top search bar, returning results relating to marketing. The user clicks on some of the icon thumbnails in the replace panel, like a simple shopping cart icon and a megaphone icon, and the icons in the Icon Grid chart on the canvas are replaced with these selections.

Select an icon. You can click anywhere on the page to exit the Replace Menu.

A simple Icon Row chart appears on a white design canvas in the Venngage Editor. The icons are simple human silhouettes in two shades of blue, one darker than the other. The user double-clicks on the chart to open the Replace Menu and clicks on a thumbnail of a star in the gallery, changing the icon in the chart on the canvas to stars, before clicking on more thumbnails and changing the chart to simple circles, then circled dollar signs.

Customize your icon column or bar chart

Icon column and bar charts work with customization tools similar to those in our regular charts. 

Resize to increase icons 

The bars of the chart are made of repeating icons. To add more icons to a bar or column (relative to their data value), resize the chart. 

A simple Icon Bar chart appears on a partial view of a light blue canvas in the Venngage Editor. The chart has three columns, one labelled 'Android', one labelled 'Apple' and one labelled 'Facebook'. Where the columns for each of these categories would be, repeating icons appear, which each of the respective lablels' namesake icons appearing. Because the chart is small, in the android column, there are four icons, in the Apple column, three, and in the Facebook column, two, as these represent the relative heights of the columns based on the data in them (the Y axis shows increments of 25 from 0 to 100). A user selects the chart and uses the bounding box to make it larger, changing the scale of the Y axis to increments of 10 (0 to 80) and changing the number of icons that appear as each of the columns, with the Android column now showing ten icons, the Apple column showing 6 and the Facebook column showing 4.

Customize the icons and text appearance

Access the Chart Menu to customize you chart. Double-click on the chart or select the chart and click "Edit Chart" in the top toolbar to open the Chart Menu panel. 
In the Venngage Editor, a user selects an Icon Column chart on a blue design canvas. When the chart is selected, a button labelled Edit Chart appears in the top toolbar and the user clicks on it to open the Chart Menu in a panel on the right side of the screen of the Editor.
 
Under the "Data" tab of the Chart Menu, click on an icon thumbnail next to a data row to change it. Change the data values by clicking into that row or column and editing the word or number.
In the Venngage Editor, an Icon Column chart is selected on a blue design canvas and the Chart Menu panel is open in the right-hand side of the screen, showing two tabs: Data and Settings. On the Data tab, a spreadsheet appears with three rows labelled Android, Apple and Facebook respectively; beside each of these is a number in the second column that represents the data in the chart on the canvas. To the left of the first column in the spreadsheet and next to each of the items listed, is a small thumbnail of an icon that represents that label: in the first it's an Android icon, in the second it's the Apple brand logo, and in the third, the Facebook logo. A user clicks on the thumbnail of the Android icon in the spreadsheet in the Chart Menu panel, and a widget opens over the spreadsheet, with the heading Icon Search and a search bar underneath it. The user types 'android' into the search bar and returns results of mono-color icons in small thumbnails underneath the bar; the user clicks on an icon of a phone with the Android logo on the screen, and this appears in the first column of the Icon Column chart on the canvas, replacing the simple Android logo. The user repeats this process twice more, clicking on the icons of each column respectively, entering a search term into the Icon search bar, and clicking on an icon thumbnail in the results, changing the icons in the Icon Column Chart on the canvas.
 
Under the "Settings" tab, change icon colors with the Color Tool by clicking on Icon Color 1 or Icon Color 2. Change the background color of the chart with Background Color.
In the Venngage Editor, an Icon Column chart is selected on a blue design canvas and the Chart Menu panel is open in the right-hand side of the screen, showing two tabs: Data and Settings. The Data tab is selected; a user clicks on the Settings tab and the display switches to a series of headings that represent the different customizable areas of the Icon Column on the design canvas. The user changes the color of the icons in the chart, changing them from a dark blue and light blue to a bright magenta and a dark plum.
 
Toggle features on and off to display labels and titles. Expand each section to access that chart feature's customizable option, like font size, font style, font color, etc. 
In the Venngage Editor, an Icon Column chart is selected on a blue design canvas and the Chart Menu panel is open in the right-hand side of the screen, showing two tabs: Data and Settings. In the Settings tab, a list of headings appear with different, expandable sections that will allow the user to customize the chart's appearance. A user clicks on each of the sections, and uses the menus and toggles to change the appearance of the chart, adding and hiding data labels, a chart title, and the Y-axis scale; as the user makes the changes, the chart adjustments appear on the canvas in real time.
 
VENNGAGE LOGO

Curious about upgrading? Compare our plan features side by side.

 

Start designing!

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request