Toman Icon
The Toman currency symbol (تومان), as a standalone icon component you can size and color like any lucide icon.
Last updated August 9, 2026
CreditsUnchangedPublished
Copied from Digikala.
Overview
import { TomanIcon } from "@/components/ui/toman-icon"
export function TomanIconDemoExample() {
return <TomanIcon className="size-6 text-foreground" />
}Installation
$ npx shadcn@latest add https://ui.persian-labs.ir/r/toman-icon.jsonUsage
import { TomanIcon } from "@/components/ui/toman-icon"
export function Example() {
return <TomanIcon className="size-4" />
}Sizes
import { TomanIcon } from "@/components/ui/toman-icon"
export function TomanIconSizesExample() {
return (
<div className="flex items-end gap-4 text-foreground">
<TomanIcon className="size-3" />
<TomanIcon className="size-4" />
<TomanIcon className="size-6" />
<TomanIcon className="size-8" />
</div>
)
}Inline with an Amount
125,000
import { TomanIcon } from "@/components/ui/toman-icon"
export function TomanIconInlineExample() {
return (
<div className="inline-flex items-center gap-1 text-lg font-semibold">
<span dir="ltr">125,000</span>
<TomanIcon className="size-4" />
</div>
)
}In a Badge
25,000
import { Badge } from "@/components/ui/badge"
import { TomanIcon } from "@/components/ui/toman-icon"
export function TomanIconBadgeExample() {
return (
<Badge variant="secondary" className="gap-1">
<TomanIcon className="size-3" />
<span dir="ltr">25,000</span>
</Badge>
)
}RTL
The icon has no directional geometry, so it just needs to sit on the correct side of the amount — before it in RTL, after it in LTR. The amount itself stays dir="ltr" since digits always read left-to-right.
125,000
import { TomanIcon } from "@/components/ui/toman-icon"
export function TomanIconRtlExample() {
return (
<div className="flex items-center gap-1 text-lg font-semibold">
<TomanIcon className="size-4" />
<span dir="ltr">125,000</span>
</div>
)
}