![\"Magento](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/02\/magento-2-hyva-hero-icons.png\"){kind=icon}
<\/figure>\n\n\n\nThe Heroicons can be easily implemented in Hyv\u00e4 theme using a simple code syntax like:<\/p>\n\n\n\n
In ViewModel:<\/strong><\/p>\n\n\n\n In CMS Content:<\/strong><\/p>\n\n\n\n You can create a ViewModel and its helped method to render the Heroicons in Magento 2 Hyv\u00e4 theme.<\/p>\n\n\n\n For example, here\u2019s the template code to render the arrow-up-circle icon from Heroicons:<\/p>\n\n\n\n The method contains a camel-cased icon name, which takes up the following parameters:<\/p>\n\n\n\n In the above code, the $classnames <\/strong>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.<\/p>\n\n\n\n To modify the default Heroicon:<\/p>\n\n\n\n To use custom icons that are not natively available in Heroicons:<\/p>\n\n\n\n In Hyv\u00e4 themes, you can use the icon directive to load any SVG icon or Heroicon on CMS content.<\/p>\n\n\n\n For Heroicons:<\/strong><\/p>\n\n\n\n For SVGs stored in web\/svg\/:<\/strong><\/p>\n\n\n\n In Magento Hyv\u00e4 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\u00e4 theme.<\/p>\n\n\n\n You can also add custom SVG icons or override the default ones to maintain consistency across the site\u2019s UI.<\/p>\n\n\n\n Meetanshi is a leading e-commerce development company, offering expert Magento and Shopify solutions. You can use our reliable Hyv\u00e4 theme solutions to move to a faster frontend. Our offerings include everything from design brainstorming to theme development and customization.<\/p>\n\n\n\n<?= $heroicons->arrowLeftHtml('', 32, 32) ?><\/pre>\n\n\n\n{{icon \"heroicons\/solid\/shopping-cart\" classes=\"text-primary\" width=24 height=24}}<\/pre>\n\n\n\nHow to Use Heroicons in Magento 2 ViewModel Templates?<\/h2>\n\n\n\n
\/** @var Hyva\\Theme\\ViewModel\\HeroiconsOutline $heroicons *\/\n$heroicons = $viewModels->require(Hyva\\Theme\\ViewModel\\HeroiconsOutline::class);\n\/\/ Render an arrow-left icon\n<?= $heroicons->arrowLeftHtml('', 32, 32) ?><\/pre>\n\n\n\nstring $classnames = '', ?int $width = 24, ?int $height = 24, array $attributes = []<\/pre>\n\n\n\n
Override a Default Heroicon in Magento 2 Hyv\u00e4 Theme<\/h3>\n\n\n\n
\n
How to Add Custom SVG in Magento 2 Hyv\u00e4 Theme?<\/h2>\n\n\n\n
\n
use Hyva\\Theme\\Model\\ViewModelRegistry;\nuse Hyva\\Theme\\ViewModel\\SvgIcons;\n\/** @var ViewModelRegistry $viewModels *\/\n\/** @var SvgIcons $hyvaicons *\/\n$hyvaicons = $viewModels->require(SvgIcons::class);\n\/\/ Render the 'arrow-up-circle' icon\necho $hyvaicons->renderHtml('meetanshi-icon', '', 24, 24); \/\/ either\necho $hyvaicons->MeetanshiIcon('', 24, 24); \/\/ or<\/pre>\n\n\n\nMethod to Use Heroicons in Magento 2 CMS Content<\/h2>\n\n\n\n
{{icon \"heroicons\/solid\/shopping-cart\" classes=\"text-primary\" width=24 height=24}}<\/pre>\n\n\n\n{{icon \"cart\"}}<\/pre>\n\n\n\nHeroicons in Hyv\u00e4 Theme: Key Things to Consider<\/h2>\n\n\n\n
![\"Hyva](\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/hyva-theme-development-service.png\")
\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"