dot-icons

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

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

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

Open https://digital-ai.github.io/dot-icons/demo/ (or http://localhost:<port>/demo/ locally)
Click Upload New in the header
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
Click Connect GitHub — authenticates via your existing gh auth session (no token input if the local proxy is running)
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.

Open IcoMoon app and import selection.json (Main Menu → Manage Projects → Import Project)
Add your new SVG icon(s) to the project
Click Generate Font and download the package
Copy the following files from the download into the repo:
- fonts/dot.woff
- fonts/dot.ttf
- fonts/dot.svg
- selection.json
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';
}
```

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' },

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