Pictogram & Waffle Chart Maker
Numbers as icons: one icon per N units, 23 of 100 people, waffles and rows out of 10.
Try before you buy.
- Free preview: every widget at preview size (up to 640 pixels) with a watermark, and its count-up animation on this page.
- Locked until you unlock it: download and copy.
- Unlock: Pro pass, ₹179 for 30 days or ₹79 for 1 week, a one-time payment that never renews. Unlock: Pro pass, $5.99 for 30 days or $2.99 for 1 week, a one-time payment that never renews.
Ways to unlock shows how to get the full result.
Printing this result is locked in the free preview.
One category per line, such as Car, 42, or a table pasted from a spreadsheet. Optional columns: Out of, Colour (#hex) and Icon (an icon name).
Rows left out
Widget
Icon
Arrow keys move through the icons; Enter or Space picks one.
Widget preview
Locked in the free preview. Opens the ways to unlock this result.
Locked in the free preview. Batch runs unlock with a pass.
Locked in the free preview. Query results unlock with a pass.
About the Pictogram & Waffle Chart Maker
Turn numbers into icons that people read at a glance. A pictogram (an isotype chart) gives each category a row of icons, one icon for every N units, and cuts the last icon to its share — 37 trees at 5 per icon are 7 icons and two fifths of an eighth. An icon array colours 23 of 100 people, the way doctors and public-health leaflets show a risk; a waffle chart splits a 10 × 10 grid by shares; comparison rows fill 7.4 of 10 icons for each product, team or country.
Type the numbers or paste them from a spreadsheet, pick one of more than 1,800 open-licence icons (the Lucide set) or your own SVG, and set the layout, colours, labels and legend. Each colour is checked against the background for WCAG 2.2 contrast, and Play runs a count-up in which the values and icons grow to their final size. Everything is drawn in your browser; your numbers and icon files are not uploaded.
How to use it
- Type or paste your numbers into Your numbers: one category per line, such as
Car, 42, or a table copied from a spreadsheet. Add a column named Out of for rows that each have their own total, or Colour and Icon columns to set them per row. - Pick a Widget: a pictogram (one icon per N units), an icon array (icons out of a total), a waffle chart (shares of a grid of cells) or comparison rows (a value out of a total for each row).
- Choose an icon from the list or search the whole icon set, or open your own SVG file, and set the icon size, the space between icons and solid or outline icons.
- Set the colours — the contrast list says which ones are too light for the background — and the title, unit, labels and legend.
- Press Play to watch the count-up. Download the SVG, a transparent PNG up to 4×, a PDF, an MP4 or GIF of the animation, or copy the embeddable HTML/CSS — with a Pro pass, or after unlocking this result; without one the page shows a free preview.
Examples
Class, Trees 1A, 37 1B, 52 Each icon = 5 trees
1A: 7 whole icons and 0.4 of the eighth (37 ÷ 5 = 7.4); 1B: 10 and 0.4 of the eleventh
Car 42 · Bus 23 · Walk 18 · Bike 12 · Train 5
100 icons: 42 in the first colour, then 23, 18, 12 and 5, with a legend “Car — 42 of 100” …
Rent 1,500 · Food 600 · Transport 300 · Bills 400 · Savings 700 (total 3,500)
43, 17, 9, 11 and 20 cells (42.9 %, 17.1 %, 8.6 %, 11.4 %, 20 %)
The exact shares are 42.86, 17.14, 8.57, 11.43 and 20 cells; the two cells left after rounding down go to the largest remainders (0.86 and 0.57).
Common uses
- Reports, slides and social posts that show counts of people, trees, homes or money as icons.
- Health and safety information: “4 in 100 people like you” as an icon array.
- Survey results and budgets as waffle charts with percentages.
- Ratings and scores as rows out of 10, for products, teams or courses.
- An animated widget for a website or newsletter, or a short video for social media.
The four widgets
- Pictogram: each category gets a row of icons; Each icon = sets how much one icon stands for (left empty, a round value keeps the longest row near 12 icons). Rows wrap after Icons per line.
- Icon array: Icons in all (100 by default, or the first row’s Out of) icons in a grid; each category colours as many icons as its value, and the rest is grey with a name of its own in the legend (“Do not have it”).
- Waffle chart: a grid of Cells (100, so each cell is 1 %) shared by the categories’ values, of their sum or of a Total you give.
- Comparison rows: every category gets the same row of icons (10 by default), filled by value ÷ total — its own Out of, the one you give, or the smallest power of ten at or above the largest value (10 for scores up to 10, 100 for values up to 100).
How icons and cells are counted
A pictogram draws value ÷ unit icons: the whole number as whole icons, the rest as a partial icon cut from the left (choose Rounding to draw only halves or whole icons instead; the page then says the icons are not to scale). Icon arrays and waffle charts can only colour whole icons, so the counts are found by the largest remainder method: each value is scaled to the number of icons, rounded down, and the icons left over go to the largest remainders, so the counts add up to the total exactly. A waffle of 100 cells for shares of 42.86 %, 17.14 %, 8.57 %, 11.43 % and 20 % gets 43, 17, 9, 11 and 20 cells.
Icon arrays for risks
Use the same number of icons for every array you compare — 100, or 1,000 for small risks — so that readers compare counts, not percentages of different wholes. Fill order → By rows keeps the coloured icons together, which makes them easy to count; Scattered spreads them at random (the same way every time) to show that anyone could be affected, at the cost of counting. Name the rest in the legend (“Do not have it”), and say in the title what one icon is.
Colours and contrast
The list under the colours compares each one with the background using the WCAG 2.2 contrast ratio: icons need at least 3:1 (SC 1.4.11 Non-text Contrast) and the text 4.5:1 (SC 1.4.3 Contrast (Minimum)). Neighbouring categories with a low ratio between them are flagged too: they look alike to many readers, so rely on the legend and labels as well as colour. The default palette is Okabe and Ito’s, designed for colour-blind readers.
Icons and your own SVG
The icons are Lucide’s, under the ISC licence (those Lucide derived from Feather also under the MIT licence; lucide.dev/license); SVG files and HTML snippets with Lucide icons carry that notice in a comment. Your own SVG file is read on your device: its paths, rectangles, circles, ellipses, lines and polygons are drawn, with their transforms; text, pictures, filters, masks and clip paths are left out, and gradients become one colour. By default it takes the categories’ colours; tick Keep my icon’s colours to draw it as it is (colours written as currentColor, hsl() or with transparency take the category’s colour).
Files and the HTML snippet
SVG and PDF keep icons and text as vectors (PDF text in scripts that need a shaping engine, such as Devanagari, Arabic or Thai, is placed as a picture instead); PNG comes at 1× to 4× with a transparent background if you like. The animation becomes an MP4 (H.264, or WebM where the browser cannot make MP4) or a looping GIF. The HTML/CSS snippet is the final picture as inline SVG with a short style block: the icons appear one after another and the values at the end, with no script and no style attributes, and visitors who ask for less motion see the picture at once.
Limitations
- Up to 24 categories; a pictogram row of up to 500 icons; icon arrays and waffle charts of up to 2,000 icons or cells.
- An MP4 needs a browser that can encode video (recent Chrome, Edge, Safari or Firefox); in others, download the GIF.
- The numbers in the HTML snippet do not count up: CSS cannot change text inside an SVG, so they appear when the icons have.
- Icon arrays colour whole icons only; values with decimals are rounded so that the counts add up (the page says so).
Privacy
On this device: nothing is sent
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What do I get without a pass?
Without a pass, Pictogram & Waffle Chart Maker shows every widget at preview size (up to 640 pixels) with a watermark, and its count-up animation on this page. Until you unlock it, the result can’t be downloaded or copied. A Pro, Premium or Ultimate pass, a one-time payment that never renews, unlocks the full result. The pricing page lists the passes and their prices.
What is the difference between a pictogram, an icon array and a waffle chart?
A pictogram shows amounts with a row of icons per category, each icon a fixed number of units. An icon array shows how many of a fixed total (often 100 people) belong to each group. A waffle chart shows shares of a whole as cells of a grid, each cell usually 1 %.
How do I make a “23 out of 100 people” graphic?
Choose Icon array, type a line such as Affected, 23, keep Icons in all at 100, name the rest under Name of the rest (“Not affected”) and pick a person icon under Icon.
How is a partial icon drawn?
The icon’s coloured part is cut at its share from the left — 0.4 of an icon shows its left 40 % — and the rest of it is drawn in grey, so that readers see a whole icon’s outline. Turn off Show the rest in grey to leave the rest out.
Why do my waffle percentages not match the cells exactly?
A cell is 1 % of 100, so shares such as 42.86 % have to be rounded. The legend shows the exact percentage of each category, and the cells are rounded by the largest remainder method so that they always add up to 100.
Can I put the animated widget on my website?
Yes: the HTML/CSS snippet works in any page or blog editor that accepts HTML with inline SVG and a style block, and the MP4 or GIF works where only video or pictures can go.
Are my numbers or my SVG uploaded?
No. The widget is drawn in your browser, the icon set comes from this site, and the files you open stay on your device.
Open-source components
This page can load these open-source components, each only when a task needs it:
- It uses Mediabunny under the MPL 2.0: licence and source code.
You may replace them with your own builds. Their licences and the credits of every library the site uses are on the open-source credits page.