Unicode 18.0 · U+20C3

dirham: The UAE Dirham sign (U+20C3) for the web

The UAE Dirham sign (U+20C3) is the official currency symbol of the UAE dirham (AED): the Latin letter D crossed by two horizontal lines, unveiled by the Central Bank of the UAE on 27 March 2025 and encoded in Unicode 18.0, released on 16 September 2026. As of October 2026, mainstream system fonts (Apple's San Francisco, Google's Noto and Roboto) don't include it yet, so dirham renders it today with a 1 KB web font, SVG components for React and React Native, and Web Components.

npm install dirham

Tree-shakeableSSR ReadyZero DependenciesTypeScript9 Weights5 Font VariantsWeb ComponentVue · Angular · SvelteCLI

The UAE Dirham sign (U+20C3): key facts

Last verified: 5 October 2026, against Unicode and Central Bank of the UAE sources.

Character: U+20C3 UAE DIRHAM SIGN · Currency Symbols block (U+20A0–U+20CF) · General Category Sc (Symbol, Currency) · added in Unicode 18.0 (2026) · UTF-8 E2 83 83 · decimal 8387.Source: Unicode code chart (PDF)
Unicode status: Accepted by the Unicode Technical Committee on 22 July 2025 (UTC #184, decision 184-C17) and published in Unicode 18.0 on 16 September 2026.Sources: UTC #184 minutes · Unicode 18.0.0
Origin: The Central Bank of the UAE (CBUAE) unveiled the Dirham symbol on 27 March 2025: the Latin letter D, from the English name 'Dirham', crossed by two horizontal lines inspired by the UAE flag.Sources: CBUAE press release (PDF) · CBUAE guidelines (PDF)
Why 18.0, not 17.0: The Central Bank of the UAE submitted the proposal to Unicode itself (L2/25-159, June 2025). It arrived after Unicode 17.0 had entered beta, so the sign was encoded in Unicode 18.0.Source: Proposal L2/25-159 (PDF)
Native display (October 2026): Apple's system fonts do not include U+20C3 yet (checked on macOS 26.6), though they already include the Saudi riyal sign (U+20C1). Google's Noto and Roboto fonts, the fallback fonts on Android, ChromeOS and most Linux desktops, don't include U+20C3 yet. Windows: not yet announced.Source: Noto font request
Browsers: Browsers don't need an update to show U+20C3; they need a font that has it. Until system fonts do, a web font that covers it (this package's Dirham font, loaded only for U+20C3 via unicode-range) renders it.
Placement: Before the amount, separated by a space, at the same height and weight as the digits (U+20C3 + no-break space + 1,234.50). Use either the symbol or the code AED, never both.Source: CBUAE guidelines (PDF)
Currency code: ISO 4217 code: AED (numeric 784, 2 decimal places).Source: ISO 4217 list (SIX)
Digital Dirham mark: The coloured Digital Dirham mark is a logo and has no code point.Source: Unicode SEW report (PDF)

dirham is an independent open-source project and is not affiliated with the Central Bank of the UAE or the Unicode Consortium. Maintained by Pooya Golchian.

Copy the Dirham symbol

Click any row to copy the UAE Dirham sign (U+20C3) as the character itself, an HTML reference, a CSS or JavaScript escape, the Arabic abbreviation or the ISO code.

Where the copied sign shows as a box

As of October 2026, mainstream system fonts (Apple's San Francisco, Google's Noto and Roboto) don't include U+20C3 yet, so the copied character shows as an empty box wherever no web font covers it. The text itself stays correct. Why it shows as a box

How to use the sign until then

Web appsUse this package: its Dirham web font loads only for U+20C3 and renders the sign in every modern browser.

HTML and emailWrite ⃃ and load the Dirham font; where web fonts can't load, write the code AED instead.

Native appsUse the SVG components from dirham/react-native.

Phones and messagesWrite AED (or د.إ in Arabic text) until your fonts include U+20C3.

Word and ExcelSee the Excel and Word answer in the FAQ.

LaterOnce your users' system fonts include U+20C3, remove the web font; text that already uses U+20C3 needs no changes.

Quick reference: UAE Dirham sign (U+20C3)

Character	⃃
Code point	U+20C3 UAE DIRHAM SIGN
Block, category	Currency Symbols (U+20A0–U+20CF), General Category Sc (Symbol, Currency)
Unicode version	18.0, released 16 September 2026
HTML	`⃃` or `⃃` (numeric character reference; there is no named entity)
CSS	`content: "\20C3";`
JavaScript / JSON	`"\u20C3"` (JavaScript also accepts `"\u{20C3}"`)
URL encoding	`%E2%83%83`
UTF-8 bytes	`E2 83 83`
UTF-16, decimal	`20C3`, `8387`
Excel	`=UNICHAR(8387)`
Word for Windows	Type `20C3`, then press Alt+X
Currency code	AED (ISO 4217, numeric 784, 2 decimal places)
Arabic abbreviation	د.إ, short for درهم إماراتي (Emirati dirham); it is not the sign
Placement	Before the amount, with a space: `formatDirham(1234.5)` returns the sign, a no-break space, then `1,234.50`
Emoji	None. U+20C3 is a currency symbol (General Category Sc), not an emoji
Native display	Not yet in Apple's or Google's system fonts (October 2026); use the web font or `<DirhamSymbol />`

UAE Dirham sign: questions and answers

Each answer starts with the short version. Last verified: 5 October 2026.

What is the new UAE dirham symbol?

The UAE dirham symbol is the official currency sign of the UAE dirham (AED), unveiled by the Central Bank of the UAE on 27 March 2025. It is the Latin letter D, from the English name 'Dirham', crossed by two horizontal lines inspired by the UAE flag. Unicode encodes it as U+20C3 UAE DIRHAM SIGN.

The Unicode Standard says the two lines 'embody the financial and monetary stability of the UAE Dirham'. It is not the Arabic letter dal. U+20C3 is only for the UAE dirham: as of Unicode 18.0, the Moroccan dirham (ISO 4217 MAD) has no sign of its own. The coloured Digital Dirham mark is a logo and has no code point.

How do I copy and paste the dirham symbol?

Click the Symbol row in the Copy table on dirham.js.org. It copies the real character U+20C3 UAE DIRHAM SIGN, not an image or a look-alike, so the pasted text stays correct. It displays only where the font in use includes the glyph; as of October 2026, most apps show an empty box or placeholder instead.

Need it for code? Copy the HTML, CSS or JavaScript row instead. Some other dirham fonts map the glyph to a private-use code point or to the letter ê; text typed with them turns into the wrong character wherever that font is missing.

What is the Unicode code point for the dirham symbol?

The dirham symbol is U+20C3 UAE DIRHAM SIGN. Unicode 18.0, released on 16 September 2026, added it to the Currency Symbols block (U+20A0–U+20CF) with General Category Sc (Symbol, Currency). It is decimal 8387, UTF-8 E2 83 83 and UTF-16 20C3. The Unicode Technical Committee accepted it on 22 July 2025.

UTC #184, decision 184-C17. Unicode 18.0 added three currency signs: the Maldivian rufiyaa (U+20C2), the UAE dirham (U+20C3) and the Omani rial (U+20C4). The Saudi riyal sign (U+20C1) arrived a version earlier, in Unicode 17.0 (September 2025).

Why does the dirham symbol show as a box?

Because the font on your screen doesn't include it yet. U+20C3 has been part of the Unicode Standard since version 18.0 (16 September 2026), but as of October 2026 Apple's system fonts and Google's Noto and Roboto don't draw it. The character itself is correct and will display once your fonts add it.

Apple's fonts were checked on macOS 26.6, where they already include the Saudi riyal sign (U+20C1). A Noto maintainer said in September 2026 that the glyph will be commissioned. Windows: not yet announced (October 2026). Websites can show the sign now with a web font that covers U+20C3, which is what the dirham package does.

How do I type the dirham symbol on a keyboard?

The CBUAE guidelines assign the dirham sign to the 6 key at the Shift level, but as of October 2026 we know of no Apple, Google or Microsoft keyboard update that adds it. Until then, enter it by code: in Word for Windows, type 20C3 and press Alt+X. It shows as a box until your fonts include it.

On single-language keycaps the sign replaces the caret (^). On a Mac, iPhone or Android phone, paste the character or save it as a text replacement, or write AED, which every keyboard can type. Use the sign or AED, never both together.

In Excel, =UNICHAR(8387) returns the dirham sign; in Word for Windows, type 20C3 and press Alt+X. Both insert the real character U+20C3, but it shows as a box unless the text uses a font that has the glyph, such as the free 'dirham' font (dirham.ttf) in the dirham npm package.

Download https://cdn.jsdelivr.net/npm/dirham/dist/fonts/dirham.ttf and install it; anyone else who opens the file needs the same font. PowerPoint can't convert codes with Alt+X, so paste the character there, or insert the CBUAE's SVG artwork, linked from its symbol guidelines, as a picture.

HTML: ⃃ or ⃃ (a numeric character reference; there is no named entity). CSS: content: "\20C3". JavaScript and JSON: "\u20C3". URL encoding: %E2%83%83. All of these produce U+20C3, but browsers draw it only with a font that has the glyph, so load a web font that covers it, such as the Dirham font in the dirham npm package.

In CSS, add a space after \20C3 (or write \0020C3) when a hex digit or a space follows it. In code samples and comments, write the escape rather than pasting the glyph, so the copied text is ASCII and unambiguous.

How do I show the dirham symbol on a website or in React?

Write the real character U+20C3 in your text and put a web font that covers it first in your font stack: import "dirham/css", then font-family: Dirham, Inter, sans-serif. The font downloads only for U+20C3 (unicode-range), and you can drop it once system fonts include the glyph. In React, <DirhamSymbol /> from "dirham/react" renders inline SVG.

Intl.NumberFormat prints AED or د.إ. for AED and never U+20C3 (checked October 2026), so formatDirham inserts the sign itself: formatDirham(1234.5) returns "\u20C3\u00A01,234.50", the sign, a no-break space and the amount. Browsers don't need an update to show U+20C3; they need a font that has it.

Does the dirham symbol go before or after the amount?

Before the amount, separated by a space, at the same height and weight as the digits: U+20C3, a no-break space, then 1,234.50. The CBUAE guidelines say digital interfaces must show it to the left of the number, and that you should use either the symbol or the code AED, never both. Don't set it in superscript or subscript.

In right-to-left Arabic text, the amount comes first and the sign second in logical order, which still displays the sign on the left. formatDirham(1234.5, { locale: "ar-AE" }) returns "1,234.50\u00A0\u20C3" with Latin digits, so render it inside a dir="rtl" element; for Arabic-Indic digits use the locale "ar-AE-u-nu-arab". Amounts written in words use "Dirhams".

What is the difference between AED, د.إ and the dirham symbol?

AED is the ISO 4217 code for the UAE dirham (numeric 784, two decimal places). د.إ is the Arabic abbreviation of درهم إماراتي (Emirati dirham), which Intl.NumberFormat prints for Arabic locales. U+20C3 is the official dirham sign the CBUAE unveiled in March 2025. Next to an amount, use either the sign or AED, never both.

All three refer to the same currency; only U+20C3 is the new sign. The Moroccan dirham is a different currency with its own code, MAD.

Is there a dirham emoji?

No. U+20C3 is a currency symbol (General Category Sc), not an emoji: Unicode 18.0's emoji data lists nothing in the U+20C0–U+20CF range, so there is no colour emoji version. Copy the character itself, or use the official CBUAE artwork (SVG or PNG) where you need a picture.

The CBUAE guidelines also say the sign should not be used as a logo, lock-up or brand identifier.

When was the dirham symbol introduced, and when did it enter Unicode?

The Central Bank of the UAE unveiled the symbol on 27 March 2025 and submitted the Unicode proposal itself (L2/25-159, June 2025). It arrived after Unicode 17.0 had entered beta, so the Unicode Technical Committee accepted it on 22 July 2025 for Unicode 18.0, which was published on 16 September 2026.

UTC #184, decision 184-C17. Unicode cautions that standardizing a new currency sign and getting vendor support typically takes at least a year, and often longer.

How It Works

The package maps the Dirham glyph to the standard Unicode code point U+20C3 in a small web font. Once your users' system fonts include U+20C3, the same text renders without it.

Unicode-Native

Uses the standard code point U+20C3, not a Private Use Area code point, so your text is correct Unicode from day one.

Future-Proof

U+20C3 has been standard Unicode since version 18.0 (16 September 2026). Once your users' system fonts include it, drop the web font; your text and components stay the same.

Multiple Approaches

Font-based component for typography-native rendering. CSS ::before content. Format utilities for currency strings.

Architecture

dirham.svg

→

svgtofont

→

U+20C3WOFF2

→

React / CSS / JS

Why dirham?

Built on the standard Unicode code point U+20C3, not a Private Use Area code point or a substituted letter, so your text stays correct even if the font fails to load or is removed later.

Standard U+20C3, Not a Workaround

Uses U+20C3 UAE DIRHAM SIGN, accepted by the Unicode Technical Committee on 22 July 2025 (UTC #184, decision 184-C17) and published in Unicode 18.0 on 16 September 2026, not a Private Use Area workaround.

5 Font Families

Dirham, Dirham-Sans, Dirham-Serif, Dirham-Mono and Dirham-Arabic draw the same outline of the sign; the Serif, Mono and Arabic variants adjust its spacing and proportions slightly to sit beside those typefaces.

No Migration Later

When your users' system fonts include U+20C3, the bundled web font simply stops being needed. No find-and-replace, no API changes, no breaking updates.

SSR-Safe SVG Component

DirhamSymbol renders as inline SVG, so it needs no font download and server-renders without a flash of missing text. With React Server Components (for example the Next.js App Router), import dirham/react in a Client Component.

HTML, CSS & JavaScript

Use U+20C3 in every layer of your stack: HTML, CSS, JavaScript and React. The Dirham font covers only U+20C3, so you can add it to any font stack and the rest of the text keeps its own font.

Dirham sign in HTML

Reference

<!-- Load the font (with a bundler: import "dirham/css") -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/dirham/dist/css/dirham.css" />

<!-- Write the character reference in text whose
     font stack starts with Dirham -->
<p style="font-family: Dirham, Inter, sans-serif">
  Total: &#x20C3;&nbsp;1,234.50
</p>

<!-- Or let the CSS class insert the sign (::before) -->
<i class="dirham-symbol" role="img" aria-label="UAE Dirham"></i>

Dirham sign in CSS

Content

/* With a bundler; or link dist/css/dirham.css from a CDN */
@import "dirham/css";

/* The sign and a no-break space before each price */
.price::before {
  font-family: "Dirham";
  content: "\20C3\00A0";
}

/* Built-in class: .dirham-symbol::before { content: "\20C3" } */

Dirham sign in JavaScript

Constants

import {
  DIRHAM_UNICODE,   // "\u20C3"
  DIRHAM_CODEPOINT, // 0x20C3 (8387)
  formatDirham,
} from "dirham";

console.log(formatDirham(1250));
// => "\u20C3\u00A01,250.00" (sign, no-break space, amount)

Dirham sign in React / Next.js

Recommended

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

function Price({ amount }: { amount: number }) {
  return (
    <span>
      <DirhamIcon size="1em" />
      &nbsp;{amount.toLocaleString()}
    </span>
  );
}

CDN Usage

Use the Dirham symbol without a bundler — just add a stylesheet link and a script tag.

CSS Only

No JS

<!-- Add to <head> -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/dirham/dist/css/dirham.css" />

<!-- Use anywhere: the sign goes before the amount -->
<i class="dirham-symbol" role="img" aria-label="UAE Dirham"></i>
<span><i class="dirham-symbol" role="img" aria-label="UAE Dirham"></i>&nbsp;100</span>

Web Component

New

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

<!-- Use anywhere — works in any framework -->
<dirham-symbol size="24" weight="bold"></dirham-symbol>
<dirham-price amount="1250"></dirham-price>
<dirham-price amount="5000000" notation="compact"></dirham-price>

Framework Integration

The Web Components work natively in Vue, Angular, Svelte, and any JavaScript framework — no wrappers needed.

Vue

v2 / v3

<script setup>
import "dirham/web-component";
</script>

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

Angular

v14+

// app.component.ts
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import "dirham/web-component";

@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <dirham-symbol size="24" weight="bold"></dirham-symbol>
    <dirham-price amount="1250"></dirham-price>
    <dirham-price
      amount="5000000"
      notation="compact">
    </dirham-price>
  `
})
export class AppComponent {}

Svelte

v3 / v4 / v5

<script>
  import "dirham/web-component";
</script>

<dirham-symbol size="24" weight="bold"></dirham-symbol>
<dirham-price amount="1250"></dirham-price>
<dirham-price
  amount={totalPrice}
  notation="compact"
  weight="semibold"
></dirham-price>

Vanilla JS

Any Framework

<script type="module">
  import "dirham/web-component";
</script>

<!-- Symbol only -->
<dirham-symbol size="24"></dirham-symbol>

<!-- Formatted price -->
<dirham-price amount="1250"></dirham-price>

<!-- Compact, Arabic locale -->
<dirham-price
  amount="5000000"
  notation="compact"
  locale="ar-AE">
</dirham-price>

<!-- Use currency code instead of symbol -->
<dirham-price amount="500" use-code></dirham-price>

<dirham-price> Attributes

Attribute	Default	Description
`amount`	0	Numeric value to display
`locale`	"en-AE"	Intl locale string (e.g. ar-AE)
`decimals`	2	Number of decimal places
`notation`	"standard"	"standard" or "compact"
`use-code`	—	Boolean attr — show AED instead of symbol
`symbol-size`	"1em"	SVG symbol width/height
`weight`	"regular"	thin · light · regular · bold · black …
`currency`	"AED"	Currency code when use-code is set

Font Playground

Explore how the Dirham symbol pairs with different typefaces and weights. Select a font to see it in action.

Typeface

Weight

Size — 64px

Amount

⃃ 1,250.00

Geist · regular · 64px · Dirham-Sans

⃃ 1,250.00

Unicode Sizes

The font-based glyph scales naturally with font-size, same as $, € and £.

12px

16px

20px

24px

32px

40px

48px

64px

80px

<DirhamIcon size={32} />

Font Pairing

See how the Dirham symbol harmonizes with different typefaces across weights.

Geist

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Inter

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Space Grotesk

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

DM Sans

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Outfit

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Plus Jakarta Sans

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

IBM Plex Sans

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Roboto

Sans

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Vazirmatn

Arabic

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Cairo

Arabic

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Noto Sans Arabic

Arabic

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

Playfair Display

Serif

⃃ 1,250.00light

⃃ 1,250.00regular

⃃ 1,250.00medium

⃃ 1,250.00bold

JetBrains Mono

Mono

⃃ 1,250.00light
⃃ 1,250.00regular
⃃ 1,250.00medium
⃃ 1,250.00bold

Geist Mono

Mono

⃃ 1,250.00light
⃃ 1,250.00regular
⃃ 1,250.00medium
⃃ 1,250.00bold

React Components

Three approaches: an inline SVG component (no font loading, SSR-safe), a font-based icon that inherits text size and color, and a price component that combines formatting with the symbol.

DirhamSymbol

SVG · Recommended

Weight variants

light

regular

medium

bold

extrabold

Inline with text

Total: 100 per unit

import { DirhamSymbol } from "dirham/react";

// Inline SVG — no font loading, SSR-safe
<DirhamSymbol size={24} />
<DirhamSymbol size="1em" weight="bold" />
<DirhamSymbol size={40} color="#10b981" weight="light" />

DirhamPrice

New

Live examples

Default 1,250.00

Compact 5M

Bold 9,999.99

No decimals 100

AED codeAED 500.00

import { DirhamPrice } from "dirham/react";

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

{/* className works — use Tailwind, CSS modules, etc. */}
<DirhamPrice amount={750} className="text-emerald-400 text-2xl" />

DirhamIcon

Unicode U+20C3

Sizes

Inline with text

Price: 100

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

<DirhamIcon size={24} />
<DirhamIcon size="1em" />

CSS Class

No JS

Sizes via font-size

Markup

<i class="dirham-symbol"></i>

<!-- Load the CSS (with a bundler: import "dirham/css") -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/dirham/dist/css/dirham.css" />

<!-- Use the class — renders U+20C3 via ::before -->
<i class="dirham-symbol" role="img" aria-label="UAE Dirham"></i>
<span class="dirham-symbol" style="font-size: 32px"></span>

Formatting & Constants

Built-in formatting and exported constants. Intl.NumberFormat prints AED or د.إ. for AED and never U+20C3 (checked October 2026), so formatDirham inserts the sign itself, followed by a no-break space.

`formatDirham()`

formatDirham(100)⃃ 100.00

formatDirham(1234.5)⃃ 1,234.50

formatDirham(100, { useCode: true })AED 100.00

formatDirham(100, { locale: "ar-AE" })100.00 ⃃

formatDirham(999999.99)⃃ 999,999.99

formatDirham(5000000, { notation: "compact" })⃃ 5M

Constants

DIRHAM_UNICODE"⃃"

DIRHAM_HTML_ENTITY⃃

DIRHAM_CSS_CONTENT\20C3

DIRHAM_CURRENCY_CODEAED

DIRHAM_FONT_FAMILYDirham

`parseDirham()`— parse a formatted string back to a number

parseDirham(formatDirham(1234.5))1234.5

parseDirham(formatDirham(100, { useCode: true }))100

parseDirham(formatDirham(250, { locale: "ar-AE" }))250

RTL / LTR

The sign goes before the amount with a space, at the same height and weight as the digits; the CBUAE guidelines require it to the left of the number in digital interfaces. Arabic output puts it after the number in logical order, which displays on the left inside dir="rtl".

English — LTR

⃃ 250.00

العربية — RTL

250.00 ⃃

Interactive Components

Animated price displays and formatted currency inputs for rich user experiences.

AnimatedDirhamPrice

60fps

1,250.00

Click to animate

import { AnimatedDirhamPrice } from "dirham/react";

<AnimatedDirhamPrice amount={1250} />
<AnimatedDirhamPrice amount={50000} duration={800} easing="easeInOut" />
<AnimatedDirhamPrice amount={999} notation="compact" weight="bold" />

DirhamInput

Controlled

Default (English)

Arabic locale

Raw value:100

import { DirhamInput } from "dirham/react";

const [value, setValue] = useState(100);

<DirhamInput value={value} onChange={setValue} />
<DirhamInput value={value} onChange={setValue} locale="ar-AE" />
<DirhamInput min={0} max={999999} decimals={2} />
<DirhamInput showSymbol={false} useCode />

VAT & Currency Conversion

Built-in UAE VAT calculations and live exchange rate conversions.

VAT Utilities

5% UAE

Base amount

addVAT()1000 + 5%

⃃ 1,050.00

getVAT()VAT portion

⃃ 50.00

removeVAT()Back to base

⃃ 1,000.00

import { addVAT, removeVAT, getVAT, UAE_VAT_RATE } from "dirham";

addVAT(100);                    // 105
addVAT(100, { rate: 0.1 });     // 110

removeVAT(105);                 // 100

getVAT(100);                    // 5
getVAT(200);                    // 10

UAE_VAT_RATE;                   // 0.05

useDirhamRate

Hook

RateLoading...

AED → USD...

USD → AED...

import { useDirhamRate } from "dirham/react";

function PriceConverter() {
  const { rate, loading, convert, convertBack } = useDirhamRate("USD");

  if (loading) return <span>Loading...</span>;
  return (
    <div>
      <p>1 AED = {rate} USD</p>
      <p>100 AED = {convert(100)} USD</p>
      <p>100 USD = {convertBack(100)} AED</p>
    </div>
  );
}

Clipboard API

Copy the Dirham symbol or formatted amounts to the clipboard in multiple formats.

copyDirhamSymbol() & copyDirhamAmount()

Async

Copy symbol in different formats

Copy formatted amount

import { copyDirhamSymbol, copyDirhamAmount } from "dirham";

await copyDirhamSymbol();          // copies the character U+20C3
await copyDirhamSymbol("html");    // copies &#x20C3;
await copyDirhamSymbol("css");     // copies \20C3
await copyDirhamSymbol("arabic");  // copies د.إ (the Arabic abbreviation, not the sign)

await copyDirhamAmount(1234.5);                    // copies "\u20C3\u00A01,234.50"
await copyDirhamAmount(1234.5, { useCode: true }); // copies "AED\u00A01,234.50"

React Native

Native SVG-based components for iOS and Android — no webview or font loading needed.

DirhamSymbol for React Native

SVG

Renders the Dirham glyph as a native SVG path via react-native-svg. No font files required.

import { DirhamSymbol } from "dirham/react-native";

<DirhamSymbol />
<DirhamSymbol size={32} color="#10b981" />
<DirhamSymbol weight="bold" />
<DirhamSymbol
  size={48}
  color="white"
  weight="light"
  accessibilityLabel="Dirham currency"
/>

Props

sizenumber = 24

colorstring = "#000"

weightDirhamWeight = "regular"

accessibilityLabelstring = "UAE Dirham"

DirhamPrice for React Native

Native

Full price display with inline SVG symbol and formatDirham() formatting.

import { DirhamPrice } from "dirham/react-native";

<DirhamPrice amount={1250} />
<DirhamPrice amount={99.99} color="white" fontSize={24} />
<DirhamPrice amount={5000000} notation="compact" />
<DirhamPrice
  amount={750}
  locale="ar-AE"
  weight="bold"
  color="#10b981"
  fontSize={20}
/>

Props

amountnumber = required

localestring = "en-AE"

decimalsnumber = 2

useCodeboolean = false

notationstring = "standard"

symbolSizenumber = 16

weightDirhamWeight = "regular"

colorstring = "#000"

fontSizenumber = 16

Peer dependency required

React Native components require react-native-svg as a peer dependency. Install it with: npx expo install react-native-svg (Expo) or npm install react-native-svg (bare RN).

Next.js Integration

A preconfigured next/font/local loader: Next.js self-hosts and preloads the Dirham font and exposes it as the --font-dirham CSS variable.

// app/layout.tsx
import { dirhamFont } from "dirham/next";

export default function RootLayout({ children }) {
  return (
    <html className={dirhamFont.variable}>
      <body>{children}</body>
    </html>
  );
}

// In any component:
import { dirhamFont } from "dirham/next";

<span className={dirhamFont.className}>&#x20C3;</span>&nbsp;1,250.00
<span className="font-[family-name:var(--font-dirham)]">&#x20C3;</span>

Tailwind CSS Plugin

Utility classes for the Dirham symbol — weights, sizes, and pseudo-element helpers.

Setup

// tailwind.config.ts
import dirhamPlugin from "dirham/tailwind";

export default {
  plugins: [dirhamPlugin],
};

Classes

.dirhamBase — sets font-family

.dirham-boldWeight utility

.dirham-lgSize utility (1.125rem)

.dirham-beforePrepend symbol via ::before

.dirham-afterAppend symbol via ::after

.dirham-pricePrice component (nowrap)

<span class="dirham">&#x20C3;</span>
<span class="dirham dirham-bold dirham-2xl">&#x20C3;</span>
<span class="dirham-before">1,234.50</span>
<span class="dirham-after">1,234.50</span>

Web Components — Input & Animated

Framework-agnostic custom elements for currency input and animated price displays.

<dirham-input>

Custom Element

<script type="module">
  import "dirham/web-component";
</script>

<dirham-input value="100" min="0" max="999999"></dirham-input>
<dirham-input locale="ar-AE" decimals="2"></dirham-input>
<dirham-input use-code show-symbol="false"></dirham-input>

<script>
  document.querySelector("dirham-input")
    .addEventListener("dirham-change", (e) => {
      console.log("New value:", e.detail.value);
    });
</script>

<dirham-animated-price>

Custom Element

<script type="module">
  import "dirham/web-component";
</script>

<dirham-animated-price amount="1250"></dirham-animated-price>
<dirham-animated-price
  amount="5000"
  duration="800"
  easing="easeInOut"
  weight="bold"
></dirham-animated-price>
<dirham-animated-price
  amount="99999"
  notation="compact"
  decimals="0"
></dirham-animated-price>

CLI

Print the sign's code point and escapes, or copy one of them from your terminal. Copying uses pbcopy on macOS, xclip or xsel on Linux and clip on Windows.

# Print the code point, escapes and ISO code
npx dirham

# Copy the character U+20C3 to the clipboard
npx dirham copy

# Copy &#x20C3; (also: css, js, arabic, code)
npx dirham copy html

# Show help
npx dirham --help

OG / Social Media Cards

Generate shareable price cards for Open Graph images, Twitter Cards, and social media. Use the SVG directly or render via @vercel/og in Next.js.

Live Preview — OG / Facebook

1200×630

Download SVG

Customize

Amount

Notation

Title

Subtitle

Direction

Accent Color

Background

Usage

import { generatePriceCardSVG } from "dirham/og";

const svg = generatePriceCardSVG({
  amount: 12500,
  title: "Invoice Total",
  subtitle: "Due: April 30, 2026",
});

<meta property="og:image" content="/api/og?amount=12500" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

// Next.js OG image route (app/api/og/route.tsx)
import { ImageResponse } from "next/og";
import { DirhamPriceCard } from "dirham/og";

export async function GET(req: Request) {
  const amount = Number(
    new URL(req.url).searchParams.get("amount") ?? "0"
  );
  return new ImageResponse(
    <DirhamPriceCard amount={amount} />,
    { width: 1200, height: 630 },
  );
}

dirham: The UAE Dirham sign (U+20C3) for the web

The UAE Dirham sign (U+20C3): key facts

Copy the Dirham symbol

Where the copied sign shows as a box

Quick reference: UAE Dirham sign (U+20C3)

UAE Dirham sign: questions and answers

What is the new UAE dirham symbol?

How do I copy and paste the dirham symbol?

What is the Unicode code point for the dirham symbol?

Why does the dirham symbol show as a box?

How do I type the dirham symbol on a keyboard?

How do I add the dirham symbol in Excel or Word?

How do I write the dirham symbol in HTML, CSS and JavaScript?

How do I show the dirham symbol on a website or in React?

Does the dirham symbol go before or after the amount?

What is the difference between AED, د.إ and the dirham symbol?

Is there a dirham emoji?

When was the dirham symbol introduced, and when did it enter Unicode?

How It Works

Unicode-Native

Future-Proof

Multiple Approaches

Why dirham?

Standard U+20C3, Not a Workaround

5 Font Families

No Migration Later

SSR-Safe SVG Component

HTML, CSS & JavaScript

Dirham sign in HTML

Dirham sign in CSS

Dirham sign in JavaScript

Dirham sign in React / Next.js

CDN Usage

CSS Only

Web Component

Framework Integration

Vue

Angular

Svelte

Vanilla JS

<dirham-price> Attributes

Font Playground

Unicode Sizes

Font Pairing

React Components

DirhamSymbol

DirhamPrice

DirhamIcon

CSS Class

Formatting & Constants

formatDirham()

Constants

parseDirham()— parse a formatted string back to a number

RTL / LTR

Interactive Components

AnimatedDirhamPrice

DirhamInput

VAT & Currency Conversion

VAT Utilities

useDirhamRate

Clipboard API

copyDirhamSymbol() & copyDirhamAmount()

React Native

DirhamSymbol for React Native

DirhamPrice for React Native

Next.js Integration

Tailwind CSS Plugin

Setup

Classes

Web Components — Input & Animated

<dirham-input>

<dirham-animated-price>

CLI

OG / Social Media Cards

`formatDirham()`

`parseDirham()`— parse a formatted string back to a number