Logo
The etisalat logo — the brand symbol in three colour schemes, plus lockup, logomark, wordmark and bilingual artworks.
etisalat-logoOpen in Figma ↗The primary etisalat brand logo in four colour versions, used wherever the brand identity needs to appear.
Use for: Headers, footers, splash screens, cards, and any surface that requires the etisalat brand mark.
Not for: Decorative illustration or partner/app logos — use the partner logo assets instead.
Choosing: Use version=default on any neutral or light surface — it works independently in most contexts. Use version=white on dark-tone surfaces (brand red, midnight, or any background where midnight or red would fail accessibility contrast). Use version=midnight on bright or neutral light surfaces when the logo needs less visual emphasis. Use version=red on surfaces with prominent contrast against red per accessibility standards — suitable for both light and darker tones, but dark-surface use is limited to high-contrast cases only.
Rules: Do not place version=default on brand-red or similar red-toned backgrounds — switch to a different version based on the surface rules above. Do not place version=red on brand-red or similar backgrounds — use version=white on darker surfaces and version=midnight on brighter ones instead. Always verify sufficient contrast between the logo version and its background surface.
import SwiftUI import EandTokens // etisalat logo (DSL V1.2). Export the Figma artworks into the asset catalog: // etisalat-logo-{default,white,red} and etisalat-{lockup,logomark,wordmark,bilingual}[-rtl]. struct EtisalatLogo: View { enum Scheme: String { case `default`, white, red } var scheme: Scheme = .default var size: CGFloat = 96 var body: some View { Image("etisalat-logo-\(scheme.rawValue)") .resizable().scaledToFit().frame(width: size, height: size) .accessibilityLabel("etisalat") } }
When to use
- The symbol (no
type) wherever the brand needs to appear: headers, splash screens, cards.defaultis the red square tile with a white lockup; usewhiteon brand-red, midnight or image backgrounds, andredon light surfaces. - A bare artwork (
type) when the space calls for a specific form:logomarkfor tight spots such as a small avatar,wordmarkfor text-only placements,lockup, orbilingualwhere English and Arabic must both appear. - Pass
rtlon Arabic screens: the lockup and wordmark switch to the Arabic artwork. Logomark and bilingual have no separate Arabic version. - Not for partner or app logos — use LogoRow with the partner's own artwork.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
color? | string | — | Overrides the version's ink. Pass currentColor to inherit from CSS instead. |
rtl? | boolean | false | Arabic lockup / wordmark. Logomark and bilingual are direction-free. |
size? | string | number | 32 | Rendered size in px; the symbol is a square. |
type? | 'lockup' | 'logomark' | 'wordmark' | 'bilingual' | — | A .etisalat-logo-variations artwork. Omit for the etisalat-logo symbol. |
version? | 'default' | 'midnight' | 'red' | 'white' | default | Figma color-scheme. midnight is deprecated (removed in V1.2). |
Design
Figma source: Etisalat Logo — etisalat Consumer App DSL V1.2
etisalat-logo(27032:50455): a 96 × 96 symbol, color-scheme default | white | red. The default tile iscolor/red/1000with square corners. The lockup spans 136/192 of the width..etisalat-logo-variations(42176:33598): lockup, logomark, wordmark and bilingual, each edge to edge in its frame. Figma spells the last onebillingual.- V1.2 replaced the V1.1 "e&" lockup and dropped its
midnightversion.version="midnight"still renders, in midnight ink, but is deprecated.