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

Source: Dev.to

Introduction

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. Most operating systems and fonts don’t render it yet.

dirham is 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
• Use the correct codepoint now; drop the workaround later

The package encodes the symbol as \u20C3 everywhere (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 simply remove the font import—everything keeps working unchanged.

Rendering Options

Installation

pnpm add dirham

React Component

DirhamSymbol renders an inline SVG. It is SSR‑compatible and requires no font loading.

import { DirhamSymbol } from 'dirham/react';

function Price() {
  return (
    <>
      100 
      
    
  );
}

Props

CSS / SCSS Usage

Import the CSS (or SCSS) once in your project:

import 'dirham/css';

@use 'dirham/scss';

Then use the symbol via a simple “ element:

Font‑weight options

thin · extralight · light · regular · medium · semibold · bold · extrabold · black

JavaScript Utilities

import { formatDirham, parseDirham } 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.5

Exported Packages

• 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)

dirham/
├── apps/docs/          # Vite + React demo site
├── packages/
│   └── dirham-symbol/  # Published npm package
└── turbo.json

Links

• GitHub
• npm
• Live Demo