Hyvä Payment Icons

This custom icon pack adds payment logos to your store, clearly displaying supported payment options.

Installation

Install the package via:

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

A Hyvä theme license is required to use this icon pack.

How to use

To use the icons, first instantiate the ViewModel:

<?php

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\PaymentIcons\ViewModel\PaymentIconsClean;

/** @var ViewModelRegistry $viewModels */

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

Then, render icons in your PHTML templates like HeroIcons:

<?= $paymentIcons->paypalHtml('', 48, 32, ["aria-label" => "Pay with PayPal"]) ?>

Using SVG icons in CMS content

Render icons in CMS content using the {{icon}} directive.

Locate the SVG path in view/frontend/web/svg. Remove the .svg extension.

For example, view/frontend/web/svg/payment-icons/clean/paypal.svg becomes payment-icons/clean/paypal.

CMS usage example:

{{icon "payment-icons/clean/paypal" classes="inline-block" width=48 height=32 title="Pay with PayPal"}}

Extend and Customization

For details on extending and customizing, refer to the Hyvä Docs on SvgIcon usage.

Available icons

Five icon styles are available: Clean, Light, Dark, Mono, and Outline.

Find available icon render methods in src/ViewModel/PaymentIconsInterface.php. Your editor's PHP Intellisense will also provide autocompletion.

Figma

A Figma file with all payment icons is available on our Figma Page.