MARK IT DOWN
Mark It Down
الصفحات · Mark It Down

Icons — Boxicons SVG system

The desktop renderer uses inline SVG icons from Boxicons (MIT). Emoji glyphs (📁 📂 💾 ✏️ etc.) have been removed from the chrome — they rendered inconsistently across OSes and felt unprofessional.

Why inline SVG, not the icon font?

  • The full boxicons.css font is ~200 KB; we use ~20 icons.
  • Inline SVG inherits currentColor, so a button's hover/active state recolors the icon for free — no extra style hooks.
  • Single network request elimination: icons ship in the renderer bundle, not as a separate asset.

Adding a new icon

  1. Find the icon at https://boxicons.com (regular set preferred for consistency).

  2. Copy the <path>/<circle> markup from node_modules/boxicons/svg/regular/bx-<name>.svg (or logos/bxl-<name>.svg).

  3. Add an entry to packages/ui-tokens/src/icons.ts:

    ts

  4. Use it from anywhere in the renderer:

    ts

    For declarative HTML buttons in index.html, use the data attributes — hydrateIconButtons() will swap them on load:

    html

Sizing & color

  • Default: 16×16, fill: currentColor (so it inherits whatever the surrounding text color is).
  • Modifiers: mid-icon--sm (14px), mid-icon--lg (20px), mid-icon--xl (24px), mid-icon--muted (uses --mid-fg-muted).

Where they're wired

  • Toolbar buttons (index.html) — declarative via data-icon.
  • File-tree rows (renderer.ts#renderTreeEntry) — folder/folder-open/file + chevron.
  • Code-block copy button (renderer.ts#attachCodeCopyButtons).

Current set

folder, folder-open, file, save, show, edit, columns, refresh, copy, download, cog, search, plus, trash, x, chevron-right, github, link, tag, list-ul, bookmark, image.

Source attribution

Boxicons is MIT-licensed (https://github.com/atisawd/boxicons/blob/master/LICENSE). The icons are reproduced under that license.