# Icons & brand marks

Download official Rahhal icons in PNG and SVG, with light and dark variants, React usage, and guidance for Lucide UI icons and social brand marks.

[View examples](https://marsam.rahhal.app/components/icons) · [Agent index](https://marsam.rahhal.app/llms.txt)

**Import:** `/brand/app-icon-{light,dark,admin}.png · lucide-react · @rahhal/ui`

**Category:** `tokens`

## Download the Rahhal icon or logo

For a request such as "get the Rahhal icon", use the consumer light PNG below by default. The dark variant is also available. These are direct public files: no login, JavaScript, or image extraction is needed.

- [Rahhal icon (light PNG)](https://marsam.rahhal.app/brand/app-icon-light.png): Default consumer Rahhal app icon for light surfaces and general downloads.
- [Rahhal icon (dark PNG)](https://marsam.rahhal.app/brand/app-icon-dark.png): Consumer Rahhal app icon for dark surfaces and dark home screens.
- [Rahhal icon (light SVG)](https://marsam.rahhal.app/brand/app-icon-light.svg): Light SVG asset for browser favicons and clients that accept SVG files.
- [Rahhal icon (dark SVG)](https://marsam.rahhal.app/brand/app-icon-dark.svg): Dark SVG asset for browser favicons and clients that accept SVG files.
- [Rahhal admin icon](https://marsam.rahhal.app/brand/app-icon-admin.png): Distinct icon reserved for internal admin and debug applications.
- [Apple touch icon](https://marsam.rahhal.app/brand/apple-touch-icon.png): 180 by 180 pixel PNG for Apple touch icons.
- [PWA icon (192px)](https://marsam.rahhal.app/brand/icon-192.png): 192 by 192 pixel PNG for web app manifests.
- [PWA icon (512px)](https://marsam.rahhal.app/brand/icon-512.png): 512 by 512 pixel PNG for web app manifests.
- [Maskable PWA icon](https://marsam.rahhal.app/brand/icon-512-maskable.png): 512 by 512 pixel maskable PNG for adaptive launcher shapes.

The served URL starts with /brand/, never /public/brand/. Source assets live in packages/seo/assets/ and are published by @rahhal/seo.

## React usage

```tsx
import { RahhalIcon } from "@rahhal/ui/rahhal-icon";

<RahhalIcon
  icon="url:https://marsam.rahhal.app/brand/app-icon-light.png"
  size={48}
  alt="Rahhal"
/>
```

```html
<img src="https://marsam.rahhal.app/brand/app-icon-light.png" width="48" height="48" alt="Rahhal" />
```

RahhalIcon is a renderer for catalog values, not a bundled Rahhal logo: pass an explicit image URL. Lucide Compass is a general UI icon, not the official downloadable Rahhal app icon.


## Social brand marks

Import from `@rahhal/ui` (not `lucide-react` — Lucide deprecated its brand icons and will remove them in v1.0). Each component is a `forwardRef<SVGSVGElement>`, fills with `currentColor`, and accepts any `SVGProps`:

| component | use |
| --- | --- |
| GithubIcon | GitHub source / org links |
| LinkedinIcon | LinkedIn company page |
| XIcon | X (formerly Twitter) |
| InstagramIcon | Instagram profile |

## UI iconography (Lucide)

Import any of the ~1,500 icons from `lucide-react`. Common picks for travel / settings UIs:

| icon | purpose |
| --- | --- |
| Compass | general navigation (not the Rahhal logo) |
| Map · MapPin | location, place markers |
| Search | search affordances |
| Heart · Star | favorites, ratings |
| Bell | notifications |
| CalendarDays | date / schedule |
| Globe | language / locale |
| Home · User · Settings | tab-bar / profile |
| Shield | auth / privacy |

## Sizing convention

| class | context |
| --- | --- |
| h-4 w-4 | inline UI (alongside text) |
| h-5 w-5 | tappable buttons (header chrome, list trailing) |
| h-6 w-6 | primary navigation (tab bars) |
| h-8 w-8 | hero / empty-state illustrations |