Icons and SVG Components
2026 Edition

Icons are small details that have a big impact on user experience. In this chapter, you will learn two practical approaches: using a ready-made icon library with @qwikest/icons and creating your own reusable SVG components for full control.

🧩 Icons

Icons are small visual elements that guide users, reinforce meaning, and improve usability. In modern frontend development, they are usually implemented as SVG components for flexibility and performance.

📦 @qwikest/icons

This package allows for a streamlined way to add icons to your Qwik app from a variety of icon sets.

• Bs: Bootstrap Icons
• Go: Octicons by GitHub
• Hi: Heroicons by Tailwind
• In: Iconoir
• Io: Ionicons by Ionic
• Lu: Lucide [superset of feather icons]
• Mo: Mono Icons
• Si: Simple Icons [icons for popular brands]
• Tb: Tabler Icons

To add @qwikest/icons package to your application, it's very simple, in the terminal execute the following command:

For your project, you can use the icons from the Heroicons set.

🦸 Heroicons

You can find all the icons available in the Heroicons set on the Heroicons website.

To use an icon, you need to import it from the @qwikest/icons/heroicons package and add it to your component.

The import name of the icon is composed as follows : { Icon set identifier + Icon name in camel case + Style }.

For example, to import the arrow-right icon from the Heroicons set, you need to import it as follows:

Let's add an icon to the login button, in the src/routes/index.tsx file, decomment this lines:

Now, if you run your application, you should see the login button with the arrow icon.🏹

🎨 Creating a custom SVG component

You can directly use the SVG icons from the Heroicons website. To do this, you don't need to install the @qwikest/icons package. Go to the Heroicons website, select the icon you want to use, and click to copy the SVG code.

In your application create a new file called assets/svg/HiArrowRightOutline.tsx into the src folder and paste following code:

Paste the SVG code you copied from the Heroicons website into the HiArrowRightOutline component.

Lastly, change the import HiArrowRightOutline into the src/routes/index.tsx file:

If you run your application, You can see that the icon arrow is still present.🏹

Into the HiArrowRightOutline component, you can change the class attribute of the svg tag to customize the style of the icon.

You can also add the props to the component to customize the icon.

And into the src/routes/index.tsx file, you can add the props to the HiArrowRightOutline component:

If you run your application, you will see that the icon is back to its original size.🏹

Using icones.js.org

As an alternative, you can explore icones.js.org. This website allows you to browse icon collections powered by Iconify and copy ready-to-use Qwik SVG components directly into your project.

Once copied, you can customize the SVG exactly as shown in the previous example.

Congratulations, you have learned how to add icons to your Qwik application.🎉

Source code

You can find the source code for chapter 3 2026 edition on GitHub.