PrestaShop Icons

Semantic icon helper for PrestaShop modules.

MprIcons::get('account');  // Just works

How It Works

• Admin: Uses Material Icons (auto-detected)
• Front: Reads from ps_mpr_config table, defaults to Font Awesome

Setup (Module Install)

Call init() from your module's install method:

public function install()
{
    MprIcons::init();  // Creates config table, detects theme icons
    return parent::install();
}

This will:

1. Create ps_mpr_config table if it doesn't exist
2. Detect theme icon set (checks theme.yml, assets for Material)
3. Save the detected preference

PHP

use MyPrestaRocks\Icons\MprIcons;

// Just call get() - it figures out the rest
echo MprIcons::get('account');
echo MprIcons::get('cart');
echo MprIcons::get('success', 'text-green');  // With extra class

// Get raw class/name (no HTML)
$class = MprIcons::raw('edit');  // 'fa fa-pencil' or 'edit'

JavaScript

Include the script and set icon set from PHP:

// In your module
$this->context->controller->addJS($this->getLocalPath() . 'vendor/myprestarocks/prestashop-icons/js/mpr-icons.js');
Media::addJsDef(['mprIconSet' => MprIcons::getIconSet()]);

MprIcons.get('account');              // HTML string
MprIcons.create('warning');           // DOM element
MprIcons.raw('edit');                 // Class/name only

Configuration

Front office icon set is stored in ps_mpr_config:

• module: mpr_global
• key: front_icon_set
• value: fontawesome or material

// Save preference
MprIcons::saveIconSet('material');

Available Icons

Name	Font Awesome	Material
account	fa fa-user	person
cart	fa fa-shopping-cart	shopping_cart
orders	fa fa-list	receipt_long
success	fa fa-check	check
error	fa fa-times	close
warning	fa fa-exclamation-triangle	warning
info	fa fa-info-circle	info
edit	fa fa-pencil	edit
delete	fa fa-trash	delete
search	fa fa-search	search
settings	fa fa-cog	settings
email	fa fa-envelope	email
phone	fa fa-phone	phone
lock	fa fa-lock	lock
logout	fa fa-sign-out	logout
home	fa fa-home	home
address	fa fa-map-marker	location_on
truck	fa fa-truck	local_shipping
credit-card	fa fa-credit-card	credit_card
calendar	fa fa-calendar	calendar_today
heart	fa fa-heart	favorite
star	fa fa-star	star
eye	fa fa-eye	visibility
eye-off	fa fa-eye-slash	visibility_off
close	fa fa-times	close
check	fa fa-check	check
plus	fa fa-plus	add
minus	fa fa-minus	remove
chevron-*	fa fa-chevron-*	chevron_*
arrow-*	fa fa-arrow-*	arrow_*
download	fa fa-download	download
upload	fa fa-upload	upload
refresh	fa fa-refresh	refresh
spinner	fa fa-spinner fa-spin	hourglass_empty
loading	fa fa-circle-o-notch fa-spin	autorenew

Full list: MprIcons::list()

SVG Sprites

For brand icons (payments, social), use the included SVG sprites. One request, multiple icons.

Sprite Structure

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

Variants Explained

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:

// 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'
);

<!-- Include sprite (hidden) -->
{include file="module:yourmodule/views/img/payments.svg"}

<!-- Use icons -->
<svg width="45" height="45"><use href="#visa_lm"/></svg>
<svg width="45" height="45"><use href="#mastercard_lm"/></svg>
<svg width="45" height="45"><use href="#paypal_lm"/></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

{include file="module:yourmodule/views/img/socials.svg"}

<svg width="24" height="24"><use href="#facebook_lm"/></svg>
<svg width="24" height="24"><use href="#x_lm"/></svg>
<svg width="24" height="24"><use href="#instagram_lm"/></svg>

Available social brands (12):

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

.payment-icon { width: 45px; height: 45px; }
.payment-icon-rect { width: 60px; height: 38px; }
.social-icon { width: 24px; height: 24px; }

License

MIT