Categories

← View All Tools

Pictograph Generator

Create pictographs using icons/symbols to represent quantities with customizable icons, colors, and layouts

Data items as JSON array with label, value, and optional color properties

Title that will be displayed above the pictograph

Custom icon emoji when "Custom Icon" is selected

Value represented by each icon

Size of each icon in pixels

Space between icons in pixels

Maximum number of icons per row (0 = unlimited)

Default color for icons (can be overridden by individual item colors)

Background color for the chart

Border color for icons

Border width in pixels

Font size for labels and values

Font size for the chart title

Color for the chart title

Display numeric values next to labels

Display category labels

Display legend showing icon value

Animate icons on load

Apply rounded corners to icons

Key Facts

Category
Data Visualization
Input Types
text, textarea, select, number, color, checkbox
Output Type
html
Sample Coverage
4
API Ready
Yes

Overview

The Pictograph Generator is a versatile data visualization tool that transforms numeric data into engaging, icon-based charts. By representing quantities with customizable symbols, colors, and layouts, it helps you create intuitive infographics that make complex data sets easier to understand and more visually appealing.

When to Use

  • •When you need to present simple statistics in a more engaging, human-readable format than standard bar or pie charts.
  • •When creating educational materials or infographics where specific symbols (like people, stars, or money) help convey the subject matter.
  • •When you want to compare small sets of categorical data using visual density rather than abstract axes.

How It Works

  • •Input your data as a JSON array containing labels, values, and optional colors for each category.
  • •Select your preferred icon type from the library or provide a custom emoji to represent your data points.
  • •Adjust visual settings such as icon size, spacing, layout flow, and color schemes to match your design requirements.
  • •Generate the pictograph and toggle options like labels, values, and legends to finalize your chart.

Use Cases

Creating HR dashboards to visualize headcount or team distribution using person icons.
Designing marketing reports that show customer satisfaction or product sales using star or shopping cart symbols.
Building educational infographics for presentations that represent environmental or social statistics with thematic icons like trees or houses.

Examples

1. Employee Department Distribution

HR Manager
Background
The HR team needs to present the headcount of three different departments to the board in a way that is immediately intuitive.
Problem
Standard bar charts look too clinical and don't reflect the human element of the workforce.
How to Use
Input the department counts as a JSON array, select the 'Person' icon, and set the icon value to 1 to represent each employee.
Example Config
[{"label": "Engineering", "value": 12, "color": "#3b82f6"}, {"label": "Design", "value": 8, "color": "#ef4444"}, {"label": "Marketing", "value": 5, "color": "#10b981"}]
Outcome
A clean, color-coded pictograph where each department is represented by a row of person icons, making the team sizes instantly comparable.

2. Customer Satisfaction Ratings

Product Manager
Background
A product team wants to showcase the number of 5-star reviews received for their latest product launch.
Problem
They need a visual that emphasizes the 'star' quality of the feedback rather than just a raw number.
How to Use
Use the 'Star' icon type, set the icon value to 1, and enable the 'Show Values' and 'Show Legend' options.
Example Config
[{"label": "Product A", "value": 25, "color": "#f59e0b"}]
Outcome
A visually striking chart featuring 25 gold stars, effectively communicating high customer approval at a glance.

Try with Samples

json, image, text
PDF Samples
Generated PDF samples from tools dated 2026-02-01 to 2026-02-10
preferred input family json
json
QR Code Samples
Sample QR code images for testing QR code reading and generation tools
preferred input family json
json
Grafana Advanced Application Samples
Comprehensive Grafana samples covering advanced dashboard design, alerting configurations, data source integrations, and plugin development
preferred input family json
json
D3.js Data Visualization Samples
Comprehensive D3.js data visualization examples including charts, maps, animations, and interactive visualizations
preferred input family json
json

Related Hubs

Json Convert Tools
Explore 100 json tools for convert workflows and compare closely related utilities quickly.
Image Convert Tools
Explore 100 image tools for convert workflows and compare closely related utilities quickly.
Text Convert Tools
Explore 80 text tools for convert workflows and compare closely related utilities quickly.
Json Tools
Explore 43 json tools for utility workflows and compare closely related utilities quickly.

FAQ

What data format is required?

The tool requires a JSON array where each object includes a 'label' (string), 'value' (number), and an optional 'color' (hex code).

Can I use my own icons?

Yes, you can select the 'Custom Icon' option and enter any emoji to serve as the symbol for your chart.

How does the 'Icon Value' setting work?

The 'Icon Value' determines how much each individual icon represents. For example, if you set it to 10, one icon will equal 10 units of your data.

Can I change the layout of the icons?

Yes, you can choose between a 'Flexible Flow' layout or a 'Fixed Grid' to control how icons are arranged within the chart area.

Is the output static or interactive?

The tool generates an HTML-based visualization that supports optional animations on load for a dynamic presentation.

API Documentation

Request Endpoint

POST /en/api/tools/pictograph-generator

Request Parameters

Parameter Name Type Required Description
chartTitle text No Title that will be displayed above the pictograph
dataItems textarea Yes Data items as JSON array with label, value, and optional color properties
iconType select Yes -
customIcon text No Custom icon emoji when "Custom Icon" is selected
iconValue number Yes Value represented by each icon
iconSize number No Size of each icon in pixels
iconSpacing number No Space between icons in pixels
maxIconsPerRow number No Maximum number of icons per row (0 = unlimited)
layout select No -
orientation select No -
customColor color No Default color for icons (can be overridden by individual item colors)
backgroundColor color No Background color for the chart
borderColor color No Border color for icons
borderWidth number No Border width in pixels
fontSize number No Font size for labels and values
titleSize number No Font size for the chart title
fontWeight select No -
titleWeight select No -
titleColor color No Color for the chart title
showValues checkbox No Display numeric values next to labels
showLabels checkbox No Display category labels
showLegend checkbox No Display legend showing icon value
animationEnabled checkbox No Animate icons on load
roundedCorners checkbox No Apply rounded corners to icons

Response Format

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-pictograph-generator": {
      "name": "pictograph-generator",
      "description": "Create pictographs using icons/symbols to represent quantities with customizable icons, colors, and layouts",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=pictograph-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]