Improve how we import and use icons

[Greenheart]

The problem

In the current Next.js website, we use icons in many different ways. Sometimes imported as inline SVGs, styled via attributes. Other times, icons are imported as images. This makes it tricky to style the SVG icons, since some parts of the code depend on hard coded colors in the SVG icon file itself.

Suggested solution

For the Astro website, we could use https://github.com/unplugin/unplugin-icons to make it easier to access the icons we need in a consistent way. I've used this solution before and it solves a lot of common problems with handling icons, and it makes it easy to add new iconsets, while only adding the ones we actually use to the production bundle.

This will also make it easier to make icons behave consistently (for example when changing colors), since unplugin-icons supports several ways of styling.

After adding unplugin-icons, we could replace most of our custom icons with icon sets.