diff --git a/README.md b/README.md
index 0af6812..1988ed9 100644
--- a/README.md
+++ b/README.md
@@ -116,56 +116,114 @@ Full list: `MprIcons::list()`
For brand icons (payments, social), use the included SVG sprites. One request, multiple icons.
-### Payment Icons
+### Sprite Structure
-Include sprite once (hidden), use anywhere:
-
-```html
-
-{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/payments.svg"}
-
-
-
-
-
+```
+sprites/
+├── payments/
+│ ├── icon-lm.svg # Logo mark, light mode
+│ ├── icon-dm.svg # Logo mark, dark mode
+│ ├── icon-la.svg # Logo mark, light accent
+│ ├── icon-da.svg # Logo mark, dark accent
+│ ├── square-lm.svg # Square format, light mode
+│ ├── square-dm.svg # Square format, dark mode
+│ ├── square-la.svg # Square format, light accent
+│ ├── square-da.svg # Square format, dark accent
+│ ├── rectangle-lm.svg # Button shape, light mode
+│ ├── rectangle-dm.svg # Button shape, dark mode
+│ ├── rectangle-la.svg # Button shape, light accent
+│ ├── rectangle-da.svg # Button shape, dark accent
+│ ├── text-only-lm.svg # Text only, light mode
+│ ├── text-only-dm.svg # Text only, dark mode
+│ ├── text-only-la.svg # Text only, light accent
+│ └── text-only-da.svg # Text only, dark accent
+└── socials/
+ ├── icon-lm.svg
+ ├── icon-dm.svg
+ ├── icon-la.svg
+ ├── icon-da.svg
+ ├── full-logo-lm.svg
+ ├── full-logo-dm.svg
+ ├── full-logo-la.svg
+ ├── full-logo-da.svg
+ ├── text-only-lm.svg
+ ├── text-only-dm.svg
+ ├── text-only-la.svg
+ └── text-only-da.svg
```
-Available (27 icons):
+### Variants Explained
-| Card Networks | Wallets | BNPL | Regional |
-|---------------|---------|------|----------|
-| `visa-color` | `paypal-color` | `klarna-color` | `ideal-color` |
-| `mastercard-color` | `apple_pay-color` | `alma-color` | `bancontact-color` |
-| `american_express-color` | `google_pay-color` | `affirm-color` | `blik-color` |
-| `discover-color` | `samsung_pay-color` | `afterpay-color` | `eps-color` |
-| `jcb-color` | `revolut-color` | | `multibanco-color` |
-| `unionpay-color` | `alipay-color` | | `p24-color` |
-| `card-color` | `wechat_pay-color` | | `sepa-color` |
-| | `satispay-color` | | `twint-color` |
-| | `mobilepay-color` | | |
-| | `link-color` | | |
-| | `stripe-color` | | |
+| Suffix | Mode | Use Case |
+|--------|------|----------|
+| `-lm` | Light Mode | Dark icons for light backgrounds |
+| `-dm` | Dark Mode | White icons for dark backgrounds |
+| `-la` | Light Accent | Brand colors on light backgrounds |
+| `-da` | Dark Accent | Brand colors on dark backgrounds |
+
+| Shape | Description | Typical Size |
+|-------|-------------|--------------|
+| `icon` | Logo mark only | 24×24, 32×32 |
+| `square` | Square with padding | 45×45 |
+| `rectangle` | Card/button shape | 60×38 |
+| `text-only` | Brand name text | varies |
+| `full-logo` | Logo + brand name (socials) | varies |
+
+### Payment Icons
+
+Copy the sprite you need to your module, include once, use anywhere:
+
+```php
+// In module install or build step
+copy(
+ _PS_MODULE_DIR_ . 'yourmodule/vendor/myprestarocks/prestashop-icons/sprites/payments/square-lm.svg',
+ _PS_MODULE_DIR_ . 'yourmodule/views/img/payments.svg'
+);
+```
+
+```html
+
+{include file="module:yourmodule/views/img/payments.svg"}
+
+
+
+
+
+```
+
+**Available payment brands (38):**
+
+afterpay, alipay, alma, amazon_pay, american_express, apple_pay, bacs, bancontact, bank, Billie, blik, cartes_bancaires, cod, credit_pay, eps, google_pay, ideal, jcb, kakao_pay, klarna, link, mastercard, mobilepay, multibanco, naverpay, p24, payco, paypal, pickup, point_of_sale, revolut, samsung_pay, satispay, sepa, twint, unionpay, visa, wechat_pay
### Social Icons
```html
-{include file="$module_dir/vendor/myprestarocks/prestashop-icons/sprites/socials.svg"}
+{include file="module:yourmodule/views/img/socials.svg"}
-
-
-
+
+
+
```
-Available: `facebook`, `twitter`, `instagram`, `linkedin`, `youtube`, `tiktok`, `pinterest`, `whatsapp`, `telegram`, `email-social`, `share`
+**Available social brands (12):**
-### Styling SVG Sprites
+amazon, apple, facebook, google, LinkedIn, microsoft, outlook, paypal, reddit, tiktok, x, yahoo
+
+### Icon ID Format
+
+Icon IDs follow the pattern: `{brand}_{mode}`
+
+Examples:
+- `visa_lm` - Visa, light mode
+- `visa_dm` - Visa, dark mode
+- `paypal_la` - PayPal, light accent
+- `facebook_da` - Facebook, dark accent
+
+### Styling
```css
-/* Size */
-svg { width: 40px; height: 25px; }
-
-/* Or use classes */
-.payment-icon { width: 40px; height: 25px; }
+.payment-icon { width: 45px; height: 45px; }
+.payment-icon-rect { width: 60px; height: 38px; }
.social-icon { width: 24px; height: 24px; }
```
diff --git a/build-sprites.php b/build-sprites.php
new file mode 100644
index 0000000..d10d472
--- /dev/null
+++ b/build-sprites.php
@@ -0,0 +1,114 @@
+ 'lm',
+ 'dark-mode' => 'dm',
+ 'light-accent' => 'la',
+ 'dark-accent' => 'da',
+];
+
+// Payment shapes
+$paymentShapes = ['icon', 'square', 'rectangle', 'text-only'];
+
+// Social shapes
+$socialShapes = ['icon', 'full-logo', 'text-only'];
+
+/**
+ * Build a sprite from a directory of SVG files
+ */
+function buildSprite(string $sourceDir, string $outputFile, string $modeSuffix): void
+{
+ if (!is_dir($sourceDir)) {
+ echo " Skipping: $sourceDir (not found)\n";
+ return;
+ }
+
+ $files = glob($sourceDir . '/*.svg');
+ if (empty($files)) {
+ echo " Skipping: $sourceDir (no SVG files)\n";
+ return;
+ }
+
+ $symbols = [];
+
+ foreach ($files as $file) {
+ $filename = basename($file, '.svg');
+ $content = file_get_contents($file);
+
+ // Extract viewBox from original SVG
+ preg_match('/viewBox="([^"]+)"/', $content, $viewBoxMatch);
+ $viewBox = $viewBoxMatch[1] ?? '0 0 45 45';
+
+ // Extract width/height if present
+ preg_match('/width="([^"]+)"/', $content, $widthMatch);
+ preg_match('/height="([^"]+)"/', $content, $heightMatch);
+ $width = $widthMatch[1] ?? null;
+ $height = $heightMatch[1] ?? null;
+
+ // Remove XML declaration and outer SVG tags
+ $content = preg_replace('/<\?xml[^>]+\?>/', '', $content);
+ $content = preg_replace('//', '', $content);
+
+ // Extract inner content (everything between )
+ if (preg_match('/