The UAE Central Bank introduced an official currency symbol for the Dirham in 2025. The Unicode Technical Committee accepted it as U+20C3 and scheduled it for Unicode 18.0 in September 2026. The problem: most operating systems and fonts don't render it yet.
I built dirham, an npm package that makes U+20C3 usable in production today, with a clear migration path for when native OS support arrives.
The Core Design Principle
Use the correct codepoint now. Drop the workaround later.
The package encodes the symbol as \u20C3 everywhere, in React components, CSS content values, and JS utilities. A custom web font provides the glyph today. When operating systems ship Unicode 18.0 support you remove the font import. Everything keeps working unchanged.
| Today | After Unicode 18.0 (Sept 2026) | |
|---|---|---|
| Rendering | Custom web font | Native OS font |
| Your code | No changes needed | Remove dirham/css import |
Installation
pnpm add dirhamReact: SVG Component
DirhamSymbol renders an inline SVG. SSR-compatible, no font loading required:
import { DirhamSymbol } from 'dirham/react';
function Price() {
return <span>100 <DirhamSymbol size={16} /></span>;
}Weight Matching
<h1>
<DirhamSymbol size="1em" weight="bold" /> Premium Plan
</h1>
<p style={{ fontWeight: 300 }}>
Only <DirhamSymbol size="1em" weight="light" /> 9.99/month
</p>Weight values: thin · extralight · light · regular · medium · semibold · bold · extrabold · black
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number / string | 24 | Width and height in px or CSS value |
color | string | currentColor | Fill color |
weight | DirhamWeight | regular | Stroke weight |
aria-label | string | UAE Dirham | Accessible label |
React: Font Icon Component
Lighter markup, requires the CSS import:
import 'dirham/css';
import { DirhamIcon } from 'dirham/react';
function Price() {
return <span>100 <DirhamIcon size={16} /></span>;
}CSS / HTML
import 'dirham/css';<i class="dirham-symbol" aria-label="UAE Dirham"></i>SCSS
@use 'dirham/scss';JavaScript Utilities
import { formatDirham, parseDirham, DIRHAM_UNICODE, DIRHAM_CURRENCY_CODE } from 'dirham';
formatDirham(1234.5); // '\u20C3 1,234.50'
formatDirham(1234.5, { locale: 'ar-AE' }); // Arabic-Indic numerals
formatDirham(100, { useCode: true }); // 'AED 100.00'
parseDirham('\u20C3 1,234.50'); // 1234.5Package Exports
| Export | Contents |
|---|---|
dirham | Core utilities and constants |
dirham/react | DirhamSymbol, DirhamIcon |
dirham/css | CSS with @font-face |
dirham/scss | SCSS with @font-face |
dirham/font/woff2 | Raw font file |
Repository Structure
Turborepo monorepo with pnpm workspaces:
dirham/
├── apps/docs/ # Vite + React demo site
├── packages/
│ └── dirham-symbol/ # Published npm package
└── turbo.json