Using Custom Icons in Your Theme

Add custom icons to your Hyvä theme or override existing default icons.

Adding Theme-Specific Icons

To add custom, theme-specific icons, create a web/svg directory in your theme's root folder.

For example, if your theme is at app/design/frontend/Acme/Theme, the full path for icons would be app/design/frontend/Acme/Theme/web/svg.

Place your SVG icon files here, e.g., rainbow-unicorn.svg.

Rendering Icons

To render a custom icon, first instantiate the Hyva\Theme\ViewModel\SvgIcons view model in your .phtml template:

<?php

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\SvgIcons;

/** @var ViewModelRegistry $viewModels */
$hyvaicons = $viewModels->require(SvgIcons::class);

Then, render an icon using one of two methods:

With renderHtml()

Pass the icon's filename (without the .svg extension) to the renderHtml() method.

<?= $hyvaicons->renderHtml('rainbow-unicorn') ?>

With a Magic Method

A more convenient way is to call a method named after the icon file.

Convert the kebab-case filename to a camelCase method name, then append Html.

For example, rainbow-unicorn.svg becomes rainbowUnicornHtml():

<?= $hyvaicons->rainbowUnicornHtml() ?>

Overriding Default Icons

Default Hyvä icons (from the Lucide set) can be overridden using Magento's theme fallback mechanism.

To override a default icon, place a file with the same name in the corresponding path within your theme.

For default Lucide icons, the path is: web/svg/lucideicons/.

For example, to override arrow-left.svg, place your custom version at web/svg/lucideicons/arrow-left.svg.

Hyvä will automatically use your custom icon.