DEV Community

Cover image for dirham: The UAE Dirham Symbol (U+20C3) as Web Font, CSS Utility & React Component
Pooya Golchian
Pooya Golchian

Posted on • Originally published at pooya.blog

dirham: The UAE Dirham Symbol (U+20C3) as Web Font, CSS Utility & React Component

#react #typescript #opensource #unicode

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.

Live Demo & Documentation

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 dirham
Enter fullscreen mode Exit fullscreen mode

React: SVG Component

DirhamSymbol renders an inline SVG. SSR-compatible, no font loading required:


function Price() {
  return <span>100 </span>;
}
Enter fullscreen mode Exit fullscreen mode

Weight Matching 

<h1>
   Premium Plan
</h1>

<p style={{ fontWeight: 300 }}>
  Only  9.99/month
</p>
Enter fullscreen mode Exit fullscreen mode

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';

function Price() {
  return <span>100 </span>;
}
Enter fullscreen mode Exit fullscreen mode

CSS / HTML 

import 'dirham/css';
Enter fullscreen mode Exit fullscreen mode 
<i class="dirham-symbol" aria-label="UAE Dirham"></i>
Enter fullscreen mode Exit fullscreen mode

SCSS 

@use 'dirham/scss';
Enter fullscreen mode Exit fullscreen mode

JavaScript Utilities 


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.5
Enter fullscreen mode Exit fullscreen mode

Package 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
Enter fullscreen mode Exit fullscreen mode

GitHub · npm · Live Demo

Top comments (0)