Symbols data

Thykes Symbols is a variable symbol font, published at https://thykes.com/v0/symbols/ with its outlines as JSON, for apps and tools that read the set over the network.

Thykes components don't use these files. Their glyphs come from the icon font that thykes.js loads; see Icons.

Files

URL	What it holds
`/v0/symbols/manifest.json`	The index: the version, the font axes, every symbol, and a SHA-256 hash of each font file
`/v0/symbols/ThykesSymbols.woff2`	The variable font, compressed for the web
`/v0/symbols/ThykesSymbols.ttf`	The same font, uncompressed, for tools that can't read WOFF2
`/v0/symbols/figma/<name>.json`	One symbol's outlines at every weight and scale, such as `figma/trash.json`. The Figma documentation of the set is built from the same files

Every file allows requests from any origin (Access-Control-Allow-Origin: *) and is sent with Cache-Control: public, max-age=0, must-revalidate, so a browser checks for a newer copy on each load.

The manifest

{
  "family": "Thykes Symbols",
  "version": "0.3.0",
  "sourceHash": "…",
  "axes": { "wght": [100, 400, 900], "SCAL": [1, 2, 3] },
  "symbols": [
    {
      "name": "check-circle-fill",
      "codepoint": "U+F0023",
      "keywords": ["check", "done", "success", "complete",
                   "confirmed", "circle", "fill", "solid"],
      "layers": [
        { "name": "shape", "hierarchy": "tertiary",
          "motionGroup": 1, "codepoint": "U+F0024" },
        { "name": "mark", "hierarchy": "primary",
          "motionGroup": 0, "knockout": true, "codepoint": "U+F0025" }
      ]
    }
  ],
  "outputs": {
    "ThykesSymbols.ttf": "<sha-256, hex>",
    "ThykesSymbols.woff2": "<sha-256, hex>"
  }
}

Field	Meaning
`family`	The font family name, `Thykes Symbols`
`version`	The version of the set, in semantic versioning (see Versions)
`sourceHash`	A hash of the sources the files were built from. It changes with every rebuild of changed sources; you can ignore it
`axes`	Each font axis as `[minimum, default, maximum]`. `wght` is the weight, 100 to 900; `SCAL` is the scale, 1 to 3
`symbols`	Every symbol, in alphabetical order
`symbols[].name`	The symbol's name, such as `trash`. Also the name of its outlines file
`symbols[].codepoint`	The character that draws the whole symbol in one color
`symbols[].keywords`	Search terms for the symbol
`symbols[].layers`	The symbol's parts, bottom first
`layers[].hierarchy`	How prominent the layer is: `primary`, `secondary` or `tertiary`
`layers[].motionGroup`	A number; layers with the same number move together when a symbol animates part by part
`layers[].codepoint`	The character that draws this layer alone. Only symbols with more than one layer have it
`layers[].knockout`	`true` when the layer is a hole in the one-color symbol (the check in `check-circle-fill`). Drawn as its own layer, it is solid and sits on top
`outputs`	The SHA-256 hash of each font file, in hex

A layer can carry other annotations in a later version; skip any field you don't know.

Codepoints

Every codepoint, in the manifest and in the outlines files, is written as U+ and its hexadecimal value in capitals: "U+F0023". They sit in the Supplementary Private Use Area-A, from U+F0000. A codepoint never changes and is never reused.

const char = String.fromCodePoint(parseInt(symbol.codepoint.slice(2), 16));

To color the layers separately, stack the layer characters in one place in the manifest's order, first at the bottom, and give each its own color.

Weights and scales

The font has two axes. wght is the weight and follows the CSS font-weight; the nine named weights are:

Weight	`wght`
Ultralight	100
Thin	200
Light	300
Regular	400
Medium	500
Semibold	600
Bold	700
Heavy	800
Black	900

SCAL is the scale: 1, 2 and 3 are the scales S, M and L, the same symbol at 0.8, 1 and 1.28 times the size of M. Set it with font-variation-settings.

@font-face {
  font-family: 'Thykes Symbols';
  src: url(https://thykes.com/v0/symbols/ThykesSymbols.woff2) format('woff2');
  font-weight: 100 900;
  font-display: block;
}
.symbol { font-family: 'Thykes Symbols'; font-synthesis: none; line-height: 1; }
.symbol-small { font-variation-settings: 'SCAL' 1; }
.symbol-large { font-variation-settings: 'SCAL' 3; }

A symbol character means nothing to a screen reader: hide it with aria-hidden="true" and give the control its own label. The font is checked in Chromium and WebKit; Firefox is not yet checked.

A symbol's outlines

Each figma/<name>.json holds one symbol drawn at all 27 combinations of weight and scale.

Field	Meaning
`name`, `codepoint`, `keywords`	As in the manifest
`density`	The symbol's stroke class: `open`, `standard` or `dense`. Denser symbols use slightly thinner strokes
`layers`	The layers, bottom first: `name`, `hierarchy`, `motionGroup`, and `knockout` where it applies. `covers` lists the earlier layers this one paints over; draw it after them
`metrics`	The drawing box: `em` 100 (px), `baselineY` 85, `capLineY` 15, and `unitsPerPx` 10 (font units per px)
`strokeRegularM`	The stroke width at Regular M, in px of the 100 px em
`skeletonRegularM`	Per layer, the centerlines at Regular M: the paths the strokes are drawn along. A layer can have none (an empty list)
`instances`	One entry per weight and scale, keyed `"Weight/Scale"`, from `"Ultralight/S"` to `"Black/L"`
`instances[].advance`	The width of the symbol's box in px, side space included
`instances[].layers`	Each layer's outline, keyed by layer name
`instances[].mono`	The one-color outline with the knockout layer cut out. Only symbols with a knockout layer have it

Every outline is SVG path data (M, L, C and Z, absolute) in px of a box 100 px tall and advance wide, with y pointing down and one decimal place. Fill it with the nonzero rule.

{
  "name": "trash",
  "codepoint": "U+F0089",
  "density": "dense",
  "metrics": { "em": 100, "baselineY": 85, "capLineY": 15, "unitsPerPx": 10 },
  "strokeRegularM": 5.9,
  "instances": {
    "Regular/M": {
      "advance": 93.9,
      "layers": { "trash": "M14.9 32.5C13.3 32.5 …Z" }
    }
  }
}

Versions

version follows semantic versioning: a new symbol raises the minor number (0.3.0 to 0.4.0), a redrawn symbol the patch number (0.3.0 to 0.3.1).
Inside /v0/, every update is compatible and replaces the files in place.
A change that would break a reader ships under a new folder, /v1/symbols/, and /v0/symbols/ stays served. That covers a removed or renamed symbol, file or field, and a different codepoint form.
Read manifest.json first. A font is current when its SHA-256 matches outputs; to load a new font past any cache, add the hash to its URL, such as ThykesSymbols.woff2?v=<hash>.