UAE dirham symbol

Copy the SVG and paste it into HTML, Figma or any design tool. It uses currentColor, so it takes the colour of the text around it.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6.75 3.75h4.174c4.4 0 7.826 3.65 7.826 8.25s-3.426 8.25-7.826 8.25H6.75Z"/><path d="M3.75 9.75h17"/><path d="M3.75 14.25h17"/></svg>

Solid version:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6.75 2.75h4.17q1.84 0 3.49.73 1.59.7 2.8 1.98t1.86 2.94l.13.35h1.55l.2.02q.1.02.18.06.1.04.17.1l.16.11.12.16.1.17.05.19.02.19-.02.2q-.02.1-.06.18-.04.1-.1.17l-.11.16-.16.12-.17.1-.19.05-.19.02h-1.08q.08.61.08 1.25t-.08 1.25h1.08l.2.02q.1.02.18.06.1.04.17.1l.16.11.12.16.1.17.05.19.02.19-.02.2q-.02.1-.06.18-.04.1-.1.17l-.11.16-.16.12-.17.1-.19.05-.19.02H19.2l-.13.35q-.65 1.66-1.86 2.94t-2.8 1.98q-1.65.73-3.49.73H6.75l-.2-.02q-.1-.02-.18-.06-.1-.04-.17-.1l-.16-.11-.12-.16-.1-.17-.05-.19-.02-.19v-5h-2l-.2-.02q-.1-.02-.18-.06-.1-.04-.17-.1l-.16-.11-.12-.16-.1-.17-.05-.19-.02-.19.02-.2q.02-.1.06-.18.04-.1.1-.17l.11-.16.16-.12.17-.1.19-.05.19-.02h2v-2.5h-2l-.2-.02q-.1-.02-.18-.06-.1-.04-.17-.1l-.16-.11-.12-.16-.1-.17-.05-.19-.02-.19.02-.2q.02-.1.06-.18.04-.1.1-.17l.11-.16.16-.12.17-.1.19-.05.19-.02h2v-5l.02-.2q.02-.1.06-.18.04-.1.1-.17l.11-.16.16-.12.17-.1.19-.05zm10.3 6h-9.3v-4h3.17q1.42 0 2.68.56 1.23.53 2.16 1.53.8.84 1.3 1.91m.7 3.25q0 .64-.1 1.25h-9.9v-2.5h9.9q.1.61.1 1.25m-10 7.25v-4h9.3q-.49 1.07-1.29 1.91-.93 1-2.16 1.53-1.26.56-2.68.56z" fill="currentColor" fill-rule="evenodd"/></svg>

See every style and size on the dirham icon page.

npm i @uv-foundry/icons-react

import { CurrencyAedIcon } from '@uv-foundry/icons-react';

<CurrencyAedIcon title="AED" />

Put the icon before an amount, at the same size as the text: <CurrencyAedIcon size={16} /> 250. Pass a title when the symbol stands alone, so screen readers say it. Vue and Svelte use the same name from @uv-foundry/icons-vue and @uv-foundry/icons-svelte.

The dirham sign is U+20C3, added in Unicode 18.0 (September 2026). Fonts and keyboards are still catching up, so the character may show as a box. Use the SVG wherever it has to look right today.

• HTML: ⃃
• CSS: content: "\20C3";
• JavaScript: "⃃"
• Excel: =UNICHAR(8387)
• Word on Windows: type 20C3, then press Alt+X

The symbol was introduced by the Central Bank of the UAE in 2025: a Latin D with two horizontal bars, echoing the UAE flag. Our icon follows that construction on a 24px grid, so it sits at the same weight as the rest of the set.

What is the Unicode code point for the UAE dirham symbol?

U+20C3 (DIRHAM SIGN), added in Unicode 18.0 in September 2026. In HTML write ⃃, in CSS "\20C3" and in JavaScript "\u20C3".

Why does the dirham symbol show as a box or blank?

Unicode 18.0 is new, so many fonts and operating systems can’t draw the character yet. Until they do, use the SVG icon or the React component on this page, which look the same everywhere.

How do I type the dirham symbol in Excel?

Use =UNICHAR(8387) in a cell (8387 is 20C3 in decimal). It only shows correctly if the cell’s font supports Unicode 18.0; otherwise insert the SVG as a picture.

How do I type the dirham symbol in Word?

On Windows, type 20C3 and press Alt+X. On a Mac, use the Character Viewer and search for “dirham”. If your font doesn’t support it yet, insert the SVG instead.

Is the dirham symbol SVG free to use?

Yes. It’s part of Omakase Icons, which is MIT licensed: free for personal and commercial use, with no attribution needed in your product.

Is there a Saudi riyal symbol too?

Not yet. More Middle East currency and payment icons, including the Saudi riyal sign, are on the roadmap.