Hey everyone! This was a part of my exploration into assets that I didn't want to lose, so I took some quick notes using the RFC template as a guide.

I think this is a cool feature, but I would love to get more feedback on it before I clean this up and submit an official RFC. Is this something that people would like to see?

If you are feeling adventurous you can check this out and use it locally via this branch: https://github.com/withastro/astro/tree/astro-icons

Summary

A built-in icon set for Astro users.

Example

---
import {Icon} from 'astro/components';
import {IconRocket, IconCookie, IconSearch} from 'astro/icons';
---
<div>
    <Icon use={IconRocket} />
    <Icon use={IconCookie} size={32} />
    <Icon use={IconSearch} size={64} />
</div>

Motivation

• Icons are a common use-case for web developers.
• Finding a good icon set can be difficult that involves a lot of googling. How do I choose the best one?
• Some external icon sets are poorly implemented and cause an overloading of data. For example, some are shipped as React components or require svgo to convert SVGs into React. Others use webfonts instead of SVGs, which is more expensive.

What if Astro came with a single, solid icon set built-in? This is slightly different from the astro-icon exploration that @natemoo-re has been doing, and shouldn't be seen as conflicting. This does not attempt to help you load your own SVGs, or help you use your favorite icon set with Astro. This is a single, opinionated icon set available to all Astro users.

Detailed design

The astro/icons Import

This RFC proposes an "astro/icons" entrypoint that is generated from the Google Material Design icons. It essentially looks like this:

export const IconCookie = "<path d=\"M21.95 10.99c-1.79-.03-3.7-1...";
export const IconCopyright = "<path d=\"M11.88 9.14c1.28.06 1.61 ...";
export const IconCoronavirus = "<path d=\"M21.25 10.5c-.41 0-.75 ...";
// ...
export const IconAirbnbLogo = "<path d=\"M224 373.12c-25.24-31.67...";
export const IconAlgoliaLogo = "<path d=\"M229.3 182.6c-49.3 0-89...";
export const IconAlipayLogo = "<path d=\"M377.74 32H70.26C31.41 3...";

It currently contains:

• 3382 different icons, generated from Google's material icons collection
• 460 logos, generated from FontAwesome's brands collection

And it supports:

• Intellisense, so that VSCode will auto-complete your imports.
• TypeScript, so that your typechecker will fail if you use a bad icon.
• Treeshaking, you will only pay the cost for the exact icons that you use.

The <Icon> Component

This RFC proposes a basic <Icon> component that takes the SVG contents that are returned from the astro/icons import and wraps them in an <svg> element.

---
// Example Implementation
export interface Props {
	use: string;
	size?: number;
}
let { use, size = 32 } = Astro.props;
---
<svg height="${size}" width="${size}" set:html={use} />

Drawbacks

The biggest drawback is the long-term commitment to picking a single icon set. If we were to change this later, it would be expensive (but not impossible) to change sets.

Alternatives - Approach

• We could just not do this!

Alternatives - Other Icon Sets

Several icon sets are available to bring into Astro. Here is the research that I did on some other options:

Notable Contenders:

• Heroicons: Well-designed, Maintained by Tailwind but not under active dev, 230 icons is a little small.
• Fontawesome: Well maintained and actively developed, well-stocked. Biggest reason against is that the style is really well-recognized, and would be hard for us to feel like this was "Astro Icons" vs. "Astro comes with Fontawesome built-in". Maybe some would see that as a perk, but Google's Material Icon is equally well maintained and well stocked, but with a much more distinctive style.

Others Considered:

• Feather Icons - not under active dev, 238 icons is a little small
• Bootstrap - 1600 icons is well-sized, but it didn't have some basic icons that I searched for ("flame", "rocket").

Adoption strategy

• Not a breaking change.

Unresolved questions

None yet.