What Unicode codepoint does the dirham package use?

U+20C3 (UAE DIRHAM SIGN), accepted by the Unicode Technical Committee on 2025-Jul-22 and scheduled for Unicode 18.0 in September 2026. The package renders this codepoint today via a custom web font.

Do I need to update my code when operating systems ship native Unicode 18.0 support?

No. U+20C3 is used throughout the package already. When system fonts gain native glyph support you simply remove the font import. All components, CSS classes, and JS utilities remain valid without any code changes.

What is the difference between DirhamSymbol and DirhamIcon?

DirhamSymbol renders an inline SVG — SSR-compatible, no font loading required, fully tree-shakeable. DirhamIcon renders a font-based glyph and produces lighter HTML markup but depends on the web font stylesheet.

How do I match the symbol stroke weight to surrounding text?

Pass a weight prop to DirhamSymbol: thin, extralight, light, regular, medium, semibold, bold, extrabold, or black. This adjusts the SVG stroke to optically match neighboring typography.

Can I use dirham without React?

Yes. Import dirham/css for the @font-face stylesheet and .dirham-symbol CSS class in any HTML project. Import dirham/scss for Sass. The formatDirham and parseDirham utilities are plain TypeScript with no framework dependency.

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

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

bash

pnpm add dirham

React — SVG Component

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

tsx

import { DirhamSymbol } from 'dirham/react';

function Price() {
  return <span>100 <DirhamSymbol size={16} /></span>;
}

Weight Matching

tsx

<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:

tsx

import 'dirham/css';
import { DirhamIcon } from 'dirham/react';

function Price() {
  return <span>100 <DirhamIcon size={16} /></span>;
}

CSS / HTML

typescript

import 'dirham/css';

html

<i class="dirham-symbol" aria-label="UAE Dirham"></i>

SCSS

scss

@use 'dirham/scss';

JavaScript Utilities

typescript

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.5

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

GitHub · npm · Live Demo

dirham: The UAE Dirham Symbol (U+20C3) as Web Font, CSS Utility & React Component Introducing the dirham npm package — the UAE Dirham currency sign (U+20C3, Unicode 18.0) available in production today via a custom web font, React SVG component, CSS utility class, and JavaScript formatting utilities. Future-proof: drop the font when native OS support ships in… 🔗 https://pooya.blog/blog/dirham

*dirham: The UAE Dirham Symbol (U+20C3) as Web Font, CSS Utility & React Component* _Introducing the dirham npm package — the UAE Dirham currency sign (U+20C3, Unicode 18.0) available in production today via a custom web font, React SVG…_ https://pooya.blog/blog/dirham