CSS & Styling

You can style your icons with custom CSS.

Custom CSS styles

Customize the styles applied to every icon by using the [data-icon] attribute selector.

<Icon name="twitter" />
<Icon name="mastodon" />
<Icon name="threads" />

<style>
[data-icon] {
    font-size: 2rem;
    color: var(--brand-color);
}
</style>

Customize the styles applied to a single icon by using the [data-icon="name"] attribute selector.

<Icon name="logo" />

<style>
[data-icon="logo"] {
    font-size: 2rem;
    color: var(--brand-color);
}
</style>

Tailwind CSS

Tailwind CSS support in Astro projects is provided by the Astro Tailwind integration. The Icon component automatically passes the class prop through to the underlying svg element.

<Icon name="logo" class="text-xl text-emerald-700" />