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.

---
import Twitter from 'virtual:icons/mdi/twitter';
import Mastodon from 'virtual:icons/ri/mastodon';
import Threads from 'virtual:icons/simple-icons/threads';
---

<Twitter />
<Mastodon />
<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="{collection}:{name}"] attribute selector.

---
import Instagram from 'virtual:icons/mdi/instagram';
---

<Instagram />

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

Tailwind CSS

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

---
import Facebook from 'virtual:icons/mdi/facebook';
---
<Facebook class="text-xl text-emerald-700" />