dot-icons

Icon font repository for Digital.ai UX — used standalone or with dot-components.

📖 Browse the demo →

Contents

• Using icons
• Browse the demo
• Adding a new icon
  • Option A — Upload via demo UI (recommended)
  • Option B — Manual via IcoMoon
• Configuring Jest
• Troubleshooting

Using icons

React — DotIcon via dot-components

import { DotIcon } from '@digital-ai/dot-components';

<DotIcon iconId="home" />
<DotIcon iconId="settings" fontSize="large" tooltip="Settings" />
<DotIcon iconId="ai" ai={true} />

Full DotIcon documentation →

Standard HTML

<link rel="stylesheet" href="./index.css" />

<span class="dot-icon">
  <i class="icon-home"></i>
</span>

Never add the icon- prefix to the iconId prop — DotIcon adds it automatically.

Browse the demo

https://digital-ai.github.io/dot-icons/demo/

The demo lets you:

• Browse all 318 icons organised into 13 categories (Navigation, Actions, Status, Layout, DevOps, Files & Docs, Communication, Security, People, AI, Logos, Business & Misc, Favourites)
• Search with fuzzy autocomplete
• Click any card to open a detail modal with Icon ID, Dot Code (<DotIcon iconId="..." />), and HTML Code — all copyable
• Star icons to save them in your Favourites tab (persisted in your browser)
• Upload a new icon directly from the browser (see below)

Adding a new icon

Option A — Upload via demo UI (recommended)

The demo includes a built-in upload flow that handles everything automatically.

Prerequisites

On the hosted demo (digital-ai.github.io/dot-icons/demo/): nothing to run yourself — click Connect GitHub and follow the device-code prompt. This works because a maintainer has deployed the demo/oauth-proxy/ Worker + registered a GitHub OAuth App (one-time setup, see demo/oauth-proxy/). GitHub's device-flow endpoints don't support CORS, so the browser can't call them directly — the Worker forwards those two calls server-to-server. It holds no secrets; Device Flow for public OAuth Apps only needs the Client ID.

If that isn't configured yet, Connect GitHub falls back to a manual Personal Access Token paste-in (scope: public_repo).

Running locally instead: run the local proxy once so the demo can authenticate as you without entering a token:

# From the repo root (requires gh CLI authenticated: gh auth login)
node demo/local-proxy.js

Steps

1. Open https://digital-ai.github.io/dot-icons/demo/ (or http://localhost:<port>/demo/ locally)
2. Click Upload New in the header
3. Fill in:
   • Icon ID — lowercase, hyphens only (e.g. my-new-icon)
   • Category — pick from the dropdown
   • SVG file — drag-and-drop or browse; must be a clean vector SVG
4. Click Connect GitHub — device-code prompt (hosted demo), local gh auth session (local proxy running), or PAT paste-in (fallback)
5. Click Create Pull Request

The PR is created automatically. Once merged, the GitHub Actions workflow (.github/workflows/generate-icon-font.yml) regenerates the icon font (dot.woff, dot.ttf) and updates index.css — no IcoMoon step required.

Note: The SVG is committed to fonts/svg/new/. After the font is regenerated it moves to fonts/svg/. You can review the generated font in the PR before merging.

Option B — Manual via IcoMoon

Use this if the upload UI is not available or you need to bulk-add icons.

1. Open IcoMoon app and import selection.json (Main Menu → Manage Projects → Import Project)
2. Add your new SVG icon(s) to the project
3. Click Generate Font and download the package
4. Copy the following files from the download into the repo:
   • fonts/dot.woff
   • fonts/dot.ttf
   • fonts/dot.svg
   • selection.json
5. Copy the new icon's CSS rule from the downloaded style.css into index.css:

   .dot-icon i.icon-my-new-icon:before {
     content: '\eXXX';
   }

6. Add the icon ID to demo/script.js in the ICONS array under the correct category, alphabetically ordered within the category:

   // ── Actions ───────────────────────────────────
   { id: 'abort',          cat: 'actions' },
   { id: 'add',            cat: 'actions' },
   { id: 'my-new-icon',   cat: 'actions' },  // ← inserted alphabetically
   { id: 'save',           cat: 'actions' },

7. Open a pull request and post in #dot-components on Slack for review

Configuring Jest

dot-icons uses @font-face which Jest/jsdom cannot process. Add a style mock:

jest.config.js

moduleNameMapper: {
  '@digital-ai/dot-icons': '<rootDir>/testing-utils/style-mock.ts',
}

testing-utils/style-mock.ts

module.exports = {};

Troubleshooting

Latest dot-icons not picked up by dot-components

Add a resolutions entry to your package.json:

"resolutions": {
  "@digital-ai/dot-icons": "latest"
}

More information: dot design system — Icons