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 that is SSR-compatible, requires no font loading, and is 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: UAE Dirham (U+20C3), Web Font and CSS Utility

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

The Core Design Principle

Installation

React: SVG Component

Weight Matching

Props

React: Font Icon Component

CSS / HTML

SCSS

JavaScript Utilities

Package Exports

Repository Structure

About Pooya Golchian

Newsletter

The Core Design Principle

Installation

React: SVG Component

Weight Matching

Props

React: Font Icon Component

CSS / HTML

SCSS

JavaScript Utilities

Package Exports

Repository Structure

About Pooya Golchian

Get practical AI and engineering playbooks

Newsletter