MAHMOUD ABDELNABY
Localization · CURATED DATASET · 1

GCC Localized Payment Method & Digital Wallet Vector Asset Pack

Stop using blurry payment logos. Pixel-perfect SVG vector icons for Mada, Knet, Benefit, Fawry, Instapay, Tabby, and Tamara in light and dark mode.

Problem it addresses

Build an open-source SVG vector asset repository for Middle Eastern payment methods: 1) Pixel-perfect, minified SVG files for Mada, Knet, Benefit (Bahrain), Fawry (Egypt), Instapay (Egypt), Meeza (Egypt), Tabby, Tamara, Apple Pay, Google Pay, STC Pay, and Cash on Delivery, 2) Light and dark mode variations, 3) Responsive HTML/CSS badge strip snippets, 4) Official brand usage rules (clear space, aspect ratio).

Who it is for

BOTH operating in high-growth e-commerce, digital publishing, and direct-response marketing across Saudi Arabia, UAE, and Egypt.

What is inside

Key files listed in the README repository architecture:

  • css/payment-badge-grid.css
  • demo/index.html
  • docs/brand-usage-guidelines.md
  • docs/official-brand-guidelines.md
  • examples/preview_showcase.html
  • LICENSE
  • README.md
  • snippets/payment-badges-responsive.html
  • snippets/payment-badges.css
  • SOURCES.md
  • svg/dark-mode/mada.svg
  • svg/light-mode/mada.svg

How to evaluate and use it

  1. Read the README first and confirm that the documented problem matches your use case.
  2. Inspect the listed files to find the data, tools, templates, and tests relevant to your task.
  3. Follow the repository’s Quick Start and check prerequisites before running commands.
  4. Compare outputs with documented examples and review limitations before using them in a decision or client workflow.

Start here: Open the README and review its setup and usage sections.

Scope and limitations

  • Official Brand Identity Guidelines: Vector artwork conforms strictly to published brand standards for Mada, Apple Pay, Tabby, Tamara, STC Pay, and KNET.
  • Aspect Ratio & Clear Space Constraints: Maintains official clear space margins and prohibits altering brand colors, typography, or proportions.
  • Dark Mode & Light Mode Variants: Provides optimized SVG assets for both light and dark checkout backgrounds with pure vector paths.

This page summarizes the available documentation; it does not establish performance or business results. Verify data and prerequisites before use.

Related repositories