Design System
Foundations

Icons

The etisalat App Icons set, synced from the Figma icon library.

Icons ship inside @eand/react-design-system — there is no separate icons package. They're synced from the etisalat App Icons Figma library. Every icon is a 24×24 glyph whose colours resolve to currentColor, so it tints with the surrounding text color.

Each icon ships in two variants: outline (bookmark) and filled (bookmark-filled). Use the toggle on a tile to preview either variant — clicking the name copies the key for whichever variant is selected.

Icons are not mirrored for you. The library's own components mirror their directional glyphs — chevrons, arrows — under dir="rtl"; when you place a directional icon yourself, wrap it in <span data-rtl-flip> and it flips in RTL. Vertical glyphs such as chevron-down never mirror.

import { Icon } from '@eand/react-design-system';

<Icon name="wallet" size={24} />
<Icon name="wallet-filled" size={24} />

Descriptions and search aliases are synced from the icon library in Figma — searching below matches names, descriptions, and aliases (try flag).

V1.2 renames

Figma DSL V1.2 gave the set's numbered duplicates real names and added dot, so the code now matches Figma one to one: 198 icons, each outline and filled.

V1.1 nameV1.2 nameNote
add-2addThe bare plus.
addadd-contentThe circled plus. add now means the bare plus.
copy-2copy-doc
grid-2gridV1.1's asymmetric grid is gone.
—dotNew. The status dot used by StatusIndicator.

add-2, copy-2 and grid-2 (and their -filled forms) still resolve through ICON_ALIASES, but they are deprecated. add could not be aliased because its meaning changed: if you used it for the circled plus, switch to add-content.

All icons

198 icons · outline + filled variants

Add or create a new item — the bare plus glyph. Not for zoom-in or increment steppers unless that's the context. Pairs with subtract as a +/− set.

Add or create a new item. Not for "expand" — this creates, doesn't reveal.

I features, smart/generative actions, magic assist. Not for favorites (use star) or ratings (use star).

AI applied to text — smart compose, summarize, rewrite, or AI-generated list content. Not for general AI (use ai) or plain lists (use list).

Cast, screen mirroring, AirPlay. Not for share (use share) or upload.

Alarm, reminder, scheduled alert. Not for notification (use notification) or clock.

App grid / all services launcher. Not for drag (use drag) or more (use more).

Move down, scroll down, download direction, expand. Not for download action (use download).

Back, previous, return. Not for the back-button context specifically — see chevron-left if that's a nav control.

Next, forward, proceed, continue. Not for external-link (use external-link).

Move up, previous, scroll to top, upload direction. Directional arrow — full shaft.

Diagonal / outward direction, go to, redirect. Not for external-link (use external-link) or share.

Aspect ratio, video fit/zoom toggle, screen fit. Not for expand/fullscreen (use expand) or scan-frame.

Attach a file or document. Not for pin/keep (use pin) or link (use link).

Bank, financial institution, payments/government. Not for generic buildings (use building).

Bluetooth connectivity. Not for wifi (use wifi).

Fast, boost, power, instant, speed. Not for eco energy (use energy-eco) or camera flash (use flash).

Saved items, favorites, reading list. Not for labels/pricing tags (use icon/tag when it exists).

Remove from saved items, unsave state. Usually is switched with the original bookmark after content has been bookmarked

Broadcast, live, signal transmission, hotspot. Not for wifi (use wifi) or podcast.

Code, developer, technical / embed. Not for terminal or file.

Calendar, date, schedule, events. Not for clock (use clock) or timer.

Find a date, search schedule, browse availability.

Phone call, voice, dial. Not for contacts or SMS (use message-text).

Add call, new contact by phone, add number.

End call, decline, hang up, missed. Confirm: end/decline or "calls disabled"?

Incoming call. Not for outgoing (use call-outgoing).

Outgoing call. Not for incoming (use call-incoming).

Camera, take photo, capture. Not for webcam (use webcam) or video (use video).

Car, vehicle, drive, automotive. Confirm intended use in a telecom app.

Payment card, credit/debit card, saved card. Not for wallet (use wallet) or SIM.

Add payment card, new card, save card.

Shopping cart, basket, checkout. Not for shop/store (use shop) or bag.

Celebration, congratulations, success moment (party popper). Not for fireworks (use fireworks) or gift.

Chat, conversation, messaging. Not for email (use mail) or SMS threads (use message-text).

Support chat, ask a question, help conversation. Not for general help (use help).

Active conversation, typing, messages present. Confirm: typing indicator or general "messages"?

Inline confirmation, selection, completed. Not for success status (use check-circle) or verified badges (use verified).

Success and completed status. Not for inline checkmarks/selections (use check) or verified badges (use verified if added).

Task lists, multi-step completion, to-do.

Expand, dropdown open, show more, accordion. Not for arrow-down.

Small chevron for lower action emphasis — compact expand/dropdown in inline selects, small-element accordions, and dense rows.

Back navigation, previous, disclosure-back. Not for arrow-left.

Small chevron for lower action emphasis — compact back/previous in tight or nested UI.

Navigate forward, disclosure, "see more", list-row affordance. Not for arrow-right.

Small chevron for lower action emphasis — compact forward/disclosure in list rows, breadcrumbs, and nested items.

Collapse, scroll up, expand-less, dropdown open→close. Not for arrow-up (chevrons = UI affordance, arrows = direction/movement).

Small chevron for lower action emphasis — compact collapse in dropdowns, small-element accordions, and dense rows.

Processor, chipset, hardware, IoT, device internals. Not for SIM (use sim) or settings (use settings).

Time, current time, hours, schedule. Not for alarm (use alarm), timer (use timer), or smartwatch.

Close, cancel, or dismiss — the bare X glyph, no container. Not for permanent deletion (use delete), removing list items (use remove), or clearing a field (use dismiss in input context).

Download from cloud / sync down to device. Not for local download (use download) or upload (use cloud-upload).

Cloud disabled, offline, no sync / connection lost. Not for error state (use cloud-error).

Upload to cloud / back up / sync up. Not for local upload (use upload) or download (use cloud-download).

Code, developer, technical / embed. Not for terminal or file.

Collapse from fullscreen, shrink, minimize. Not for subtract or close.

Cookies, cookie consent/preferences, privacy settings. Not for rewards or food content.

Duplicate content to clipboard. Not for switching between items (use layers/switch).

Copy, duplicate document, copy to clipboard. Not for delete or move.

Premium, VIP, top tier, exclusive. Telecom: likely premium plan tier — confirm.

Cut, trim, scissors. Not for delete or edit.

Permanent, destructive removal of an entity (delete account, delete saved card, delete message). Not for: removing items from a list (use minus/remove), closing UI elements (use dismiss), clearing input text (use dismiss in input context), or archiving (use archive).

Delivery, shipping, courier, dispatch. Not for package (use package) or tracking.

Multiple devices, multi-device, cross-device sync. Not for single device types.

Discount, percentage off, promotional offer. Not for gift (use gift) or voucher.

Close, cancel, or dismiss UI elements. Not for deletion (use delete) or remove-from-list (use remove).

Generic status indicator, unread marker, selection dot, or bullet point. Confirm intended use — meaning varies heavily by context (notification dot, radio-unselected, progress step, bullet).

Download to device. Not for import/upload (use upload) or save (use bookmark).

Drag handle for reordering/moving items. Not for apps-grid (use apps) or more (use more).

Edit, modify, write (pencil). Not for compose/new (use edit-square) or delete.

Education, learning, tutorial, guide, academy. Not for guide/book (use guide).

Clean/renewable energy, eco-friendly power, sustainability. Not for AI or loading.

Expand to fullscreen, enlarge, maximize. Not for zoom-in (use add) or move (use move).

Expand/resize horizontally, drag width.

Expand/resize vertically, drag height. Not for sort (use sort) or reorder.

Discovery / explore section entry point. Not for location/maps (use map-pin if added).

Opens in a new destination outside the current context. Not for share (use share) or upload.

Face ID, facial biometric authentication. Not for face-scan (camera context) or user.

File, single document, page. Not for article (use article) or folder.

New file, add document, create.

Filter results, funnel, narrow down. Not for slider controls (use filters) or sort (use sort).

Adjustable filters, sliders, fine-tune controls. Not for filter-funnel (use filter) or settings (use settings).

Fingerprint, biometric authentication, touch ID. Not for face-id.

Folder, directory, file group. Not for archive (use archive).

New folder, add to folder, create directory.

Gift, reward, offer, present, Smiles perk. Not for voucher (use voucher) or discount.

Glasses, view mode, reading, accessibility. Confirm intended use.

Globe, world, international, roaming, language/region. Telecom: likely roaming/international — confirm.

Grid layout, tile/gallery view, dashboard. Not for menu (use menu) or table.

Guide, documentation, read more, catalog, learn. Not for bookmark (use bookmark) or article (use article).

Headphones, audio device, listening, support-call. Not for volume or mic.

Like, love, favorite (emotional/social favoriting). Not for ratings (use star) or saving (use bookmark).

Help, FAQ, questions, support entry. Not for general info (use info).

Home screen / main dashboard entry point. Not for physical address (use location) or buildings (use building).

Waiting, processing, time remaining, pending. Not for loading (use loading) or timer.

Image, photo, picture. Not for camera (use camera) or file.

Informational/neutral messages and tooltips. Not for help/questions (use help) or warnings (use warning).

Insurance, protection plan, coverage (umbrella). Telecom: likely device insurance/protection plan — confirm.

Laptop, computer. Not for desktop (use monitor) or tablet.

Copy/attach a URL, linked content. Not for external navigation (use external-link).

Unlink, broken/removed link.

Location pin, place, map marker. Not for saved-pin (use pin) or navigation (use navigation).

Placed location marker, dropped pin, specific spot. Confirm vs location — is this a distinct "dropped/anchored" pin?

Locked, secured, private, protected. Not for privacy shield (use security) or unlock.

Sign in / enter. Not for sign-out (use logout).

Sign out / exit session. Not for sign-in (use login) or external-link (use external-link).

Auto-enhance, auto-apply, one-tap smart action. Not for general AI features (use ai).

Email, inbox, messages. Not for chat (use chat) or SMS (use message-text).

Unread mail, new email notification.

Medal, award, recognition, rank. Confirm vs trophy — how do they differ?

Main navigation menu (hamburger). Not for list view (use list) or more-options (use more).

Text message, SMS, message with content. Not for chat (use chat) or email (use mail).

Microphone, voice input, record audio, voice search. Not for volume (use volume) or call.

Microphone muted, voice input disabled. Not for volume-off (use volume-off).

Desktop monitor, display, screen. Not for TV (use tv) or laptop.

Dark mode, night, sleep, do-not-disturb. Not for notification-off (use notification-off).

Overflow menu / additional actions, shown as a horizontal row of dots. Typically used inline or in toolbars. Not for drag-handle (use drag), app grid (use apps), or main navigation (use menu).

Overflow menu / contextual actions, shown as a vertical column of dots. Typically used at the end of list rows or cards. Not for drag-handle (use drag) or app grid (use apps).

Move / drag in any direction (four-way arrows). Not for expand (use expand) or resize.

Navigate, directions, current heading (arrow). Not for send (paper plane, use send) or explore.

Alerts and notification entry points. Not for reminders/alarms (use alarm if added later).

Office building, company, workplace. Not for residential (use home) or store (use store).

Order tracking, shipment status, package in transit. Confirm intended use.

Package, product box, order item, delivery item. Not for archive (use archive) or delivery (use delivery).

Theme, color, appearance, customize look. Not for AI styling (use ai) or fill.

Pause playback.

Smartphone, mobile device, handset. Not for call action (use call) or SIM (use sim).

Picture-in-picture, floating mini player, PiP. Not for devices (use devices) or airplay.

Pin/attach an item to keep it prominent. Not for saving (use bookmark) or location (use map-pin).

Generic placeholder for design/layout scaffolding only. Not a product UI icon — do not place in customer-facing screens.

Play, start playback. Not for send or navigation.

Connect, plug-in, power, integration. Not for energy or puzzle (add-on).

Printer, print action. Not for scanner or fax.

Add-on, extension, module, integration, feature piece. Telecom: likely plan add-ons — confirm.

QR code display/generation. Not for scanning (use scan).

Receipt, bill, invoice, transaction record. Telecom: likely your bill/statement — confirm.

Redo, reapply undone action. Not for forward navigation.

Refresh, reload, sync content (circular arrows). Not for undo/redo or swap.

Remove item from a list/collection (non-destructive). Not for permanent deletion (use delete) or closing UI (use dismiss).

Reply, respond, go back with return. Not for undo (use undo) or share (use share).

Launch, deploy, ship, boost, get started. Not for send (use upload/send) or navigation.

List/row layout, stacked rows, table view. Not for menu (use menu) or grid.

Save, store (floppy disk). Not for bookmark (use bookmark) or download.

Scan area, viewfinder, capture bounds. Not for placeholder (designer-only) or QR scan (use scan).

Screen / display (blank monitor). Confirm vs monitor and tv — how does this differ?

Search within a list or filtered results. Not for general search (use search).

Security, protection, verified safe (shield + check). Not for lock (use lock) or user-verified.

Send message, submit, share. Not for upload (use upload) or external-link.

Server, database, storage, data. Not for cloud (use cloud) or archive.

Settings, configuration, preferences (hex/cog). Not for filters (use filters) or chip/hardware (use chip).

Shapes, categories, variety, mixed content. Confirm intended use.

Share, forward, send onward (curved arrow out). Not for send (paper plane, use send), external-link, or reply.

e& Shop, store entry point, browse products. Not for physical retail branch (use store) or cart.

Shuffle, reroute, alternate paths. Confirm intended use vs swap.

SIM card, eSIM, mobile number/line. Not for memory card, chip (use chip), or settings. Telecom-core: represents the physical/eSIM and line management.

Smartwatch, wearable. Not for time/clock (use clock) or timer.

Emoji, reaction, feedback, mood, satisfaction. Not for user (use user) or rating.

Sort, order, arrange by criteria (descending lines). Not for filter (use filter) or reorder (use sort-vertical).

Sort or reorder up/down, ascending-descending toggle. Not for swap (use swap) or resize (use expand-vertical).

Speed, performance, data speed, gauge. Telecom: likely internet/data speed — confirm.

Confirm intended use — spiral/vortex/radar? Possibly loading, signal, or decorative.

Sprout, growth, new, eco, sustainability. Not for flower (use flower).

Stop playback, end. Not for close or square-container.

Retail store, shop, marketplace, physical outlet. Not for e& Shop app (use shop/bag icon) or office (use office).

Subtitles, closed captions, CC. Not for text or article.

Remove, decrease, or collapse — the bare minus glyph. Not for permanent deletion (use delete). Pairs with add as a +/− set (steppers, quantity controls, zoom).

Light mode, day, bright, sunny. Not for energy or flash.

Support, help, lifebuoy, assistance. Confirm vs support — same concept?

Customer support, help centre, contact agent. Not for headphones (audio device) or help (FAQ).

Swap, exchange, transfer between two (horizontal arrows). Not for sync (use sync) or refresh (use refresh).

Sync, two-way update, continuous refresh (two curved arrows). Not for refresh (single reload) or swap.

Label, category, price tag, product tag. Not for bookmark (use bookmark) — this is a label, not a save action.

Dislike, disapprove, negative feedback, unhelpful. Not for delete or close.

Like, approve, positive feedback, helpful. Not for favorites (use heart) or ratings (use star).

Ticket, event pass, voucher, admission. Not for voucher (use voucher) or discount.

Countdown, stopwatch, elapsed time, time limit. Not for clock (use clock) or hourglass.

Achievement, award, winner, milestone. Not for crown (premium) or medal.

Television, TV, eLife TV / streaming. Telecom: likely your eLife TV product — confirm.

Undo last action, revert, go back a step. Not for back navigation (use chevron-left/arrow-left).

Unlimited, infinite, no cap. Telecom: unlimited data/minutes — confirm.

Unlocked, open access, unsecured.

Upload from device / send up. Not for download (use download) or external-link.

User, person, account, profile. Not for contacts list (use users) or settings.

Add user, invite, new contact, add line. Telecom: may map to adding a line/member — confirm.

Verified user, confirmed account, approved profile. Not for check-circle (general success).

Multiple users, group, family, shared account, contacts. Telecom: may map to family/shared plans — confirm.

Verified, certified, official badge, guaranteed. Not for check-circle (success) or security (shield).

Video, video call, record video. Not for camera (use camera) or play.

Show / reveal content, visible state (e.g. show password). Not for search (use search) or preview.

Hide / conceal content, hidden state (e.g. hide password).

Volume on, sound, audio level. Not for mute (use volume-off) or mic.

Muted, sound off, silent. Not for mic-off (use mic-off).

Wallet, saved payment methods, balance. Not for single card (use card) or bank.

Warehouse, storage, or garage facility.

Caution, attention-needed, non-critical alerts. Uses status/warning tokens. Not for errors (use error/x) or info (use info).

Webcam, camera device. Not for photo camera (use camera) or video call.

Wi-Fi, wireless internet, connectivity. Not for data-usage (use data-usage), bluetooth, or broadcast.

On this page