Get started

icons.json

dist/icons.json is the list of the whole set. It is built with the icons, so it always matches the files.

Fields

Field	Value
`name`	Always `"Bloom"`.
`version`	The set’s version, 0.9.0 today.
`size`	The canvas, 24.
`stroke`	The stroke of the line styles, 1.5.
`duotoneOpacity`	The opacity of the secondary parts in the duotone styles, 0.5.
`surfaceOpacity`	The fill opacity of a single-object icon’s inside in Line Duotone, 0.2.
`styles`	The five style folders under `dist/`.
`files`	The path pattern, `dist/<style>/<name>.svg`.
`motionFiles`	The path pattern of the files that move on hover, `dist/motion/<style>/<name>.svg`, for the icons marked `motion`. See Hover motion.
`motionCss`	`dist/motion.css`: every moving icon’s rules in one stylesheet, for pages that refuse inline styles.
`categories`	Each category key with its title, in Solar’s order.
`renames`	Names that were renamed or removed, newest first: `version`, `from`, `to` (the icon to use now), `kind` and `note`. See Renamed icons.
`icons`	Every icon as `name`, `category` and `tags`, sorted by name. `"motion": true` marks the 39 that also come in a moving version.

What it looks like

The start of the file, with the lists cut short:

{
  "name": "Bloom",
  "version": "0.9.0",
  "size": 24,
  "stroke": 1.5,
  "duotoneOpacity": 0.5,
  "surfaceOpacity": 0.2,
  "styles": ["linear", "line-duotone", "outline", "bold", "bold-duotone"],
  "files": "dist/<style>/<name>.svg",
  "motionFiles": "dist/motion/<style>/<name>.svg",
  "motionCss": "dist/motion.css",
  "categories": {
    "ui": "UI",
    "video": "Video",
    …
  },
  "renames": [
    {
      "version": "0.6.0",
      "from": "earth",
      "to": "globe",
      "kind": "removed",
      "note": "It looked almost the same as tennis-ball."
    },
    …
  ],
  "icons": [
    {
      "name": "air-conditioner",
      "category": "home",
      "tags": ["ac", "cooling", "climate", "appliance"]
    },
    {
      "name": "air-conditioner-waves",
      "category": "home",
      "tags": ["ac", "cooling", "airflow", "climate"]
    },
    …
  ]
}

Names and tags

A name says what the icon shows (gear, magnifier, tray-arrow-down). Tags carry the uses and other words for it (settings, search, download). To find an icon for a use, search the tags, not the names.

Read it from a script

import { readFile } from 'node:fs/promises';

const set = JSON.parse(await readFile('dist/icons.json', 'utf8'));
const forSettings = set.icons.filter((icon) => icon.tags.includes('settings'));
const paths = forSettings.map((icon) => `dist/linear/${icon.name}.svg`);