The UAE Dirham currency symbol (⃃) as a web font, CSS utility, and React component.

The glyph uses U+20C3, the codepoint assigned to the UAE Dirham Sign in Unicode 18.0, rendered today through a custom web font. When operating systems ship native Unicode 18.0 support (September 2026), the web font is no longer needed and can be dropped without any code changes.

Live Demo  ·  npm  ·  GitHub

npm install dirham
# or
pnpm add dirham
# or
yarn add dirham

Renders an inline SVG. SSR-compatible, tree-shakeable, no font loading required.

import { DirhamSymbol } from "dirham/react";

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

Weight values: thin extralight light regular medium semibold bold extrabold black

// Matches a bold heading
<h1>
  <DirhamSymbol size="1em" weight="bold" /> Premium Plan
</h1>

// Matches light body text
<p style={{ fontWeight: 300 }}>
  Only <DirhamSymbol size="1em" weight="light" /> 9.99/month
</p>

Font-based alternative. Requires dirham/css to be imported.

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

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

Import the stylesheet to register the @font-face and .dirham-symbol helper class.

import "dirham/css";

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

@use "dirham/scss";

Combines formatting + symbol into a single component:

import { DirhamPrice } from "dirham/react";

<DirhamPrice amount={1250} />
<DirhamPrice amount={5000000} notation="compact" weight="bold" />
<DirhamPrice amount={100} useCode />

Framework-agnostic — works in Vue, Angular, Svelte, or vanilla HTML:

<script
	type="module"
	src="https://cdn.jsdelivr.net/npm/dirham/dist/web-component/index.js"
></script>

<dirham-symbol size="24" weight="bold"></dirham-symbol>
<dirham-price amount="1250"></dirham-price>
<dirham-price amount="5000000" notation="compact"></dirham-price>

Or import in a bundler:

import "dirham/web-component";

Vue — <dirham-price amount="1250" /> · Angular — add CUSTOM_ELEMENTS_SCHEMA · Svelte — works out of the box.

See the package README for full framework examples.

import {
	DIRHAM_UNICODE,
	DIRHAM_SYMBOL_TEXT,
	DIRHAM_CURRENCY_CODE,
	DIRHAM_CSS_CONTENT,
	DIRHAM_HTML_ENTITY,
	formatDirham,
	parseDirham,
} from "dirham";

// Format a number as a Dirham amount
formatDirham(1234.5); // "\u20C3 1,234.50"
formatDirham(1234.5, { locale: "ar-AE" }); // "١٬٢٣٤٫٥٠ \u20C3"
formatDirham(100, { useCode: true }); // "AED 100.00"
formatDirham(5000000, { notation: "compact" }); // "\u20C3 5M"

// Parse a formatted string back to a number
parseDirham("\u20C3 1,234.50"); // 1234.5

<!-- CSS web font -->
<link
	rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/dirham/dist/css/dirham.css"
/>
<i class="dirham-symbol" aria-label="UAE Dirham"></i>

<!-- Web Component -->
<script
	type="module"
	src="https://cdn.jsdelivr.net/npm/dirham/dist/web-component/index.js"
></script>
<dirham-symbol size="20"></dirham-symbol>

import { copyDirhamSymbol } from "dirham";

await copyDirhamSymbol(); // copies \u20C3 to clipboard
await copyDirhamSymbol("html"); // copies ⃃
await copyDirhamSymbol("css"); // copies \20C3

npx dirham              # Print symbol info
npx dirham copy         # Copy \u20C3 to clipboard
npx dirham copy html    # Copy HTML entity

Font files are available via named subpaths:

• dirham/font/woff2
• dirham/font/woff
• dirham/font/ttf

U+20C3 (UAE DIRHAM SIGN) was accepted by the Unicode Technical Committee on 2025-Jul-22 and is scheduled for Unicode 18.0 (September 2026).

This package already uses that codepoint. The custom web font renders the glyph today, and when system fonts gain native U+20C3 support the font file can simply be removed — existing usages of ⃃, \u20C3, and all React components remain valid.

import {
	DIRHAM_UNICODE, // "\u20C3"
	DIRHAM_CODEPOINT, // 0x20C3
} from "dirham";

This project uses Turborepo with pnpm workspaces.

dirham/
├── apps/
│   └── docs/              # Demo and documentation site (Vite + React)
├── packages/
│   ├── dirham-symbol/     # The published npm package
│   └── tsconfig/          # Shared TypeScript configuration
├── turbo.json
├── pnpm-workspace.yaml
└── biome.json

pnpm install
pnpm --filter @dirham/docs dev
# Opens at http://localhost:3000

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Lint
pnpm lint

# Format
pnpm format

Publish from the package directory, not the monorepo root.

# 1. Build
cd packages/dirham-symbol
pnpm build

# 2. Set your npm auth token
npm config set //registry.npmjs.org/:_authToken <your-token>

# 3. Dry run
npm pack --dry-run

# 4. Publish
npm publish --access public

The monorepo root package.json is marked private: true to prevent accidental publishing.

Contributions are welcome. Please read the Contributing Guide and Code of Conduct before opening a pull request.

MIT. See LICENSE.

The Dirham symbol glyph is sourced from the Central Bank of UAE.