Hyvä comes with an in-built library of SVG icons known as Heroicons. They’re a lightweight alternative to loading resources from any other third-party library. You can use these SVG icons to make the theme look visually better.
In this tutorial, I cover different ways you can use Heroicons in the Hyvä theme. It also includes a manual method to use the SVG icons in CMS content from the admin panel.
What are Heroicons in Hyvä Theme?
In the Magento 2 Hyvä theme, the “Heroicons” are collections of high-quality and lightweight SVG icons for website design. This library of icons is designed by Tailwind CSS, which is fully integrated with the Hyvä theme. These icons help developers easily add icons to the theme files.
These icons are available in different styles like Solid and Outline. View the full library of Heroicons.
The Heroicons can be easily implemented in Hyvä theme using a simple code syntax like:
In ViewModel:
<?= $heroicons->arrowLeftHtml('', 32, 32) ?>
In CMS Content:
{{icon "heroicons/solid/shopping-cart" classes="text-primary" width=24 height=24}}
How to Use Heroicons in Magento 2 ViewModel Templates?
You can create a ViewModel and its helped method to render the Heroicons in Magento 2 Hyvä theme.
For example, here’s the template code to render the arrow-up-circle icon from Heroicons:
/** @var Hyva\Theme\ViewModel\HeroiconsOutline $heroicons */
$heroicons = $viewModels->require(Hyva\Theme\ViewModel\HeroiconsOutline::class);
// Render an arrow-left icon
<?= $heroicons->arrowLeftHtml('', 32, 32) ?>
The method contains a camel-cased icon name, which takes up the following parameters:
string $classnames = '', ?int $width = 24, ?int $height = 24, array $attributes = []
In the above code, the $classnames define the name of the class to add to the SVG icon and $width and $height parameters contain the dimensions. You can also add additional HTML attributes to the Heroicon.
Override a Default Heroicon in Magento 2 Hyvä Theme
To modify the default Heroicon:
- Copy the Heroicon SVG from vendor/hyva/theme/web/svg/heroicons/ into web/svg/heroicons/
- Modify and save the SVG file in the web/svg/heroicons/ as per your requirements
How to Add Custom SVG in Magento 2 Hyvä Theme?
To use custom icons that are not natively available in Heroicons:
- Download the SVG file of the icon (for e.g., meetanshi-icon.svg)
- Place it in the Hyva_Theme/web/svg/ directory
- Then instantiate the \Hyva\Theme\ViewModel\SvgIcons view model in your template and call either renderHtml or the magic method matching the desired icon name.
use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\SvgIcons;
/** @var ViewModelRegistry $viewModels */
/** @var SvgIcons $hyvaicons */
$hyvaicons = $viewModels->require(SvgIcons::class);
// Render the 'arrow-up-circle' icon
echo $hyvaicons->renderHtml('meetanshi-icon', '', 24, 24); // either
echo $hyvaicons->MeetanshiIcon('', 24, 24); // or
Method to Use Heroicons in Magento 2 CMS Content
In Hyvä themes, you can use the icon directive to load any SVG icon or Heroicon on CMS content.
For Heroicons:
{{icon "heroicons/solid/shopping-cart" classes="text-primary" width=24 height=24}}
For SVGs stored in web/svg/:
{{icon "cart"}}
Heroicons in Hyvä Theme: Key Things to Consider
In Magento Hyvä themes, Heroicons are the preferred way to make the store front more appealing without compromising the loading speed. You can use the methods mentioned above to add SVG icons to your Hyvä theme.
You can also add custom SVG icons or override the default ones to maintain consistency across the site’s UI.
Meetanshi is a leading e-commerce development company, offering expert Magento and Shopify solutions. You can use our reliable Hyvä theme solutions to move to a faster frontend. Our offerings include everything from design brainstorming to theme development and customization.
