How to Add and Customize Heroicons (SVG Icons) in Hyvä Theme

 Hyvä Theme is gaining popularity for its speed and flexibility in Magento 2 stores. One of its key features is SVG icons, particularly Heroicons, for a clean and modern UI. In this guide, we'll walk you through how to add and customize Heroicons in Hyvä Theme.

What Are Heroicons?

Heroicons is an open-source collection of SVG icons designed for simplicity and scalability. They are widely used in Hyvä Theme to maintain a sleek and lightweight frontend.

Adding Heroicons to Hyvä Theme

Step 1: Locate the Icon Directory

Hyvä Theme stores its SVG icons in the svg/ directory inside Hyva_Icons. This directory contains the default SVG icons used by the theme.

Step 2: Add a New Heroicon

To add a new Heroicon:

Download the required icon from the Heroicons library.

Copy the downloaded SVG file to the svg/ directory inside Hyva_Icons.

Rename the SVG file as per your preference, ensuring it follows a consistent naming convention.

Step 3: Reference the Icon in Templates

Once the icon is added, it can be referenced within the theme’s templates to display it where needed.

Customizing Heroicons in Hyvä Theme

Method 1: Modify the SVG Code

You can directly edit the SVG file inside the svg/ directory to customize its appearance, such as changing colors, strokes, or paths.

Method 2: Use Tailwind Classes

Since Hyvä Theme is built with Tailwind CSS, you can modify the icon’s appearance dynamically by applying different styling classes.

Method 3: Override Icons in Child Theme

To prevent overwriting customizations when updating Hyvä Theme, you can store modified icons in a child theme:

Create a web/svg/ directory inside your child theme.

Copy the modified SVG file into this directory.

Hyvä will automatically prioritize the child theme icons over the default ones.

Conclusion

Adding and customizing Heroicons in Hyvä Theme is straightforward and enhances your store’s UI. By following these steps, you can easily integrate, modify, and style SVG icons for a more personalized user experience.

  
For a detailed blog :https://meetanshi.com/blog/svg-icons-heroicons-in-hyva-theme/