siteation / magento2-icons-payment

1.0.1 2026-09-12 19:57 UTC

Requires

• php: >=8.1
• magento/framework: >=102.0.0

Suggests

• hyva-themes/magento2-theme-module: Renders the icons as inline SVG, with theme fallback and the Hyva icon cache, instead of as an <img>

MIT

• Siteation

• svg
• magento2
• magento2-module
• paymenticons

Published on Packagist.org on 2026-09-12 19:58 UTC

README

This Magento 2 module adds payment method icons to your storefront, as a library of 40 icons in three styles, with view models to render them.

Unlike most icon packs, this one is not tied to a frontend. It needs nothing but magento/framework, so the icons render in Luma, Nebula, a custom theme or a standalone checkout. Install it alongside Hyvä and the same call renders inline SVG through Hyvä's own SvgIcons, so a Hyvä store keeps the theme fallback, icon cache and Alpine handling it already has.

Installation

Install the package via:

composer require siteation/magento2-icons-payment
bin/magento setup:upgrade

How to use

Each style has its own view model, so you pick the look by picking the view model:

Style	View model	Look
default	Siteation\IconsPayment\ViewModel\PaymentIcons	Card with the brand logo
flat	Siteation\IconsPayment\ViewModel\PaymentIconsFlat	Flat brand logo
mono	Siteation\IconsPayment\ViewModel\PaymentIconsMono	Monochrome

Preview of each style

Default

Flat

Mono

The monochrome icons are drawn with currentColor, so they take the text colour of whatever you place them in. They are not previewed here for that reason.

Get Payment Icons in your own Template blocks.

First get the view model in your template, using the following sample:

Hyva - Sample Phtml file head

<?php declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Magento\Framework\View\Element\Template;
use Magento\Framework\Escaper;
use Siteation\IconsPayment\ViewModel\PaymentIcons;

/** @var ViewModelRegistry $viewModels */
/** @var Template $block */
/** @var Escaper $escaper */

/** @var PaymentIcons $paymentIcons */
$paymentIcons = $viewModels->require(PaymentIcons::class);

Luma - Sample Phtml file head

For Luma templates, pass the view model as a block argument in your layout XML:

<block name="my.block" template="My_Module::icons.phtml">
    <arguments>
        <argument name="payment_icons" xsi:type="object">Siteation\IconsPayment\ViewModel\PaymentIcons</argument>
    </arguments>
</block>

<?php declare(strict_types=1);

use Magento\Framework\View\Element\Template;
use Magento\Framework\Escaper;
use Siteation\IconsPayment\ViewModel\PaymentIcons;

/** @var Template $block */
/** @var Escaper $escaper */

/** @var PaymentIcons $paymentIcons */
$paymentIcons = $block->getData('payment_icons');

After this you can render any icon in your phtml:

<?php
// Render by name
$paymentIcons->renderHtml('ideal', 'p-1', 64, 48, ['title' => 'Pay with iDEAL']);

// Or through the per icon accessor, the same as the Heroicons in Hyva
$paymentIcons->idealHtml('p-1', 64, 48, ['title' => 'Pay with iDEAL']);

What comes out depends on the store, and nothing else about the call changes:

<!-- with Hyva -->
<svg class="p-1" width="64" height="48" role="img">
    <title>Pay with iDEAL</title>
    …
</svg>

<!-- without -->
<img
    src="…/Siteation_IconsPayment/svg/default/ideal.svg"
    class="p-1"
    width="64"
    height="48"
    alt="Pay with iDEAL"
    loading="lazy"
    decoding="async"
/>

Extra attributes land on the root element either way, so ['loading' => 'eager'] works for icons above the fold.

Sizing defaults to 24 × 24. Pass your own width and height to scale, in any ratio: the icons are drawn on a 24 × 16 canvas and are scaled to fit the box you give them, never stretched to fill it.

Accessibility

Pass a title when an icon is the only thing naming a payment option. It becomes the <title> of an inline icon and the alt text of an <img>.

Without one the <img> renders alt="", which is how HTML says decorative. That is the right default for icons sitting next to a label that repeats the same name.

What the <img> fallback cannot do

Two things need inline SVG, so they need a Hyvä store:

• Styling the icon internals from your stylesheet
• The mono style, whose currentColor fills render black inside an <img>

Available icons

abn-b2b-afterpay • alipay • amazonpay • amex • applepay • bancontact • banktransfer • belfius • biller • billie • billink • cash-on-delivery • creditcard • direct-debit • eps • giftcard • giropay • googlepay • ideal • ideal-wero • in-3 • kbc • klarna • maestro • mastercard • multibanco • mybank • payconiq • paypal • paysafecard • przelewy-24 • riverty • sepa • sofort • stripe • trustly • visa • vpay • wechatpay • wero

Note

in3 and przelewy24 are accepted as aliases of in-3 and przelewy-24, so both spellings resolve to the same icon.

Missing or Outdated Payment Icons?

We strive to keep this list of payment options and their logos accurate and up to date.

If you notice a missing icon or an outdated logo, please help us improve the list by opening an issue or, even better, submitting a pull request.

Enhance Your Store with Automatic Payment Icons

This icon pack integrates with our StoreInfo Payments module to automatically display payment icons based on your configured Magento 2 payment options.

Interested, then checkout the StoreInfo Payments to display your Payment options Automatically!

More Siteation Modules

We have a whole suite of modules that add even more features to your store.

• StoreInfo – Use your store information directly on the storefront.
• StoreInfo USPS – Display USPS details in the header, footer, and more.
• StoreInfo Menus – Manage static menus, like footer menus, directly from the backend.
• StoreInfo Payments – Show active payment methods on the frontend without manually adding them.

Icon License

The payment icons used in this module were created by Siteation under a MIT License

Disclaimer

All used trademarks, brands and/or names are the property of their respective owners.

The use of these trademarks, brands and/or names does not indicate endorsement of the property holder by us, nor vice versa.