Render an equipment icon

Serve a line drawing of any equipment id, rendered in your palette at the size you ask for.

Put equipment in a list row, a filter chip or a picker cell without shipping an icon set and without tinting anything yourself. The icon answers to the same id as the equipment record and arrives already painted in your theme.

GET /v1/{publishableKey}/equipment/icon/{id}.{png|webp}

HTML

<img
  src="https://cdn.gymassets.dev/v1/{key}/equipment/icon/dumbbell.png?size=96"
  alt="Dumbbell"
  width="48"
/>

Response · image/png 200

content-type: image/png
cache-control: public, max-age=3600
access-control-allow-origin: *
access-control-expose-headers: x-quota-status, x-width-clamped

Path parameters

Parameter	Behavior
`publishableKey`	Authorizes the image request and assigns it to the Equipment allowance
`id`	A stable id returned by `/v1/equipment`
extension	`png` or `webp`

Choose a format

Take the PNG for an icon. It is lossless, which matters more here than it does on a figure — an icon is flat colour with hard edges, exactly what lossy compression softens — and it goes everywhere without a second thought.

Take .webp when the same page already carries many of them and the bytes matter more than the edges. Any other extension returns 400 unsupported_format.

Query parameters

Parameter	Default	Behavior
`theme`	The theme on the key	A published theme id to paint this request in
`size`	`96`	Size in pixels, from `16` through `960`. One number — icons are square. `w` is accepted as a synonym

Ask for the size you draw at

Request the pixel size the image will occupy, and double it for a high-density display: size=96 drawn in a 48-pixel box stays sharp on a phone. A size outside the supported range is clamped rather than refused, and the response says what it did:

GET /v1/{publishableKey}/equipment/icon/{id}.png?size=4321

cURL

curl -I 'https://cdn.gymassets.dev/v1/{key}/equipment/icon/dumbbell.png?size=4321'

Response · image/png 200

content-type: image/png
x-width-clamped: 4321->960

Paint a resting row and a selected one

Your theme paints the icon in three parts: the outline, the body of the machine, and the accent — the pads, grips and plates. The accent is what carries the selection.

Ready-made themes cover both states, and any key may select them:

Theme	`theme`	Use it for
Neutral Dark	`thm_neutral_dark`	An unselected row on a dark interface
Paper	`thm_paper`	An unselected row on a light interface
Sky	`thm_highlight_dark_sky`	The selected row, cool
Amber	`thm_highlight_dark_amber`	The selected row, warm

Selection repaints the accent and leaves the rest of the drawing where it was. Each highlight shares its outline and body with thm_neutral_dark:

/v1/{key}/equipment/icon/leg-press-45.png?theme=thm_neutral_dark
/v1/{key}/equipment/icon/leg-press-45.png?theme=thm_highlight_dark_sky

Your own themes work the same way. Theming covers publishing one and what each colour reaches.

A theme naming nothing published is not an error. The image returns in the theme on the key, and the name you sent comes back in x-theme-unknown.

Errors

GET /v1/{publishableKey}/equipment/icon/leg-press-machine.png

cURL

curl 'https://cdn.gymassets.dev/v1/{key}/equipment/icon/leg-press-machine.png'

Response · application/json 404

{
  "error": "unknown_equipment",
  "id": "leg-press-machine",
  "ids": "https://api.gymassets.dev/v1/equipment"
}