Icons and shapes in image templates

Badges, starbursts, social logos, a check mark next to each feature. They are layers like text and images, named in JSON, so a template or an agent can use them without uploading a file.

An icon is a name

{ "name": "logo", "type": "icon", "icon": "simple-icons:github",
  "x": 72, "y": 520, "width": 48, "height": 48, "color": "#ffffff" }

icon is set:name. The sets:

Set	What	Count
`lucide`	Outline icons, 24 px grid, 2 px stroke (ISC)	about 2,100
`tabler`	Outline icons (MIT)	about 5,200
`tabler-filled`	Solid icons (MIT)	about 1,050
`simple-icons`	Brand logos: github, youtube, x, instagram, stripe… (CC0; the logos are their owners' trademarks)	about 3,500

GET /v1/icons?q=truck searches them by name and is free. Words match parts of names, so q=arrow right finds arrow-right, arrow-big-right and the rest:

curl 'https://api.imageapis.com/v1/icons?q=truck&set=lucide' -H 'X-API-Key: YOUR_KEY'

The icon is drawn in color, which can be a gradient. background, radius and padding put it on a disc or a tile:

{ "name": "badge", "type": "icon", "icon": "lucide:check", "x": 72, "y": 200, "width": 64, "height": 64,
  "color": "#ffffff", "background": "#16a34a", "radius": 32, "padding": 14 }

A placeholder works too, as "icon": "{{icon}}", so one template shows a different icon for each row of a CSV. An unknown name is refused when you save the template, and at render time when a variable fills in a name that does not exist.

Twenty shapes

{ "name": "burst", "type": "shape", "shape": "starburst", "points": 18,
  "x": 900, "y": 40, "width": 240, "height": 240, "fill": "#f43f5e", "rotation": -12 }

shape is one of ellipse, triangle, diamond, pentagon, hexagon, octagon, star, starburst, scallop, blob, arrow, chevron, heart, speech, cross, ring, arch, semicircle, quarter and line. Each stretches to fill its box, and rotation turns it. Point a triangle or arrow any way you like.

fill: a colour or a gradient, such as linear-gradient(135deg, #f472b6, #818cf8).
stroke and stroke_width: an outline, kept inside the box, and dash for a dashed one. A line is drawn in its stroke (or fill), as thick as its box is tall unless stroke_width says otherwise, with round ends.
points for star (5), starburst (16) and scallop (12), variant 1 to 8 for blob, and thickness for ring and cross.
shadow on shapes and icons is a drop shadow that follows the outline, such as 0 8px 24px rgba(0,0,0,.3).

A "SALE" sticker is a starburst with a text layer on it:

{ "name": "sticker", "type": "shape", "shape": "starburst", "x": 920, "y": 360, "width": 220, "height": 220, "fill": "#facc15", "rotation": 10 },
{ "name": "sticker_text", "type": "text", "x": 940, "y": 430, "width": 180, "height": 80, "text": "{{discount}}",
  "align": "center", "valign": "middle", "weight": 900, "size": 44, "color": "#111827", "rotation": 10 }

In the editor

The editor has Shape and Icon buttons. Shapes open a picker drawn by the same engine as the API; icons open a search across every set. A shape or icon layer's panel has the same pickers to swap it, and the handle above a selected layer rotates it.