lucide VS iconify

Lucide-react: A collection of icons as React components Lucide React.

Lucide - Beautiful & consistent icons

If you’re using a different framework, Lucide has you covered. The library provides bindings for Vue, Angular, Solid, Svelte, Prereact and other popular frameworks as well. Check the Official Documentation for detailed instructions on how you can integrate Lucide with your preferred framework. Icon Packs: Lucide also supports icon packs, which allows you to extend the library with additional icons. This feature is particularly useful if you have custom icons like font-awesome, that you want to use alongside the standard Lucide icons.

Website: https://lucide.dev/

Here's my result, thanks again! Turns out yes you can put emoji in the file name. Haven't figured out a way to use SVG icons which would have been nice but I'll keep at it, and this is stellar anyway.

Where --callout-color is the RGB value and --callout-icon is anything you pick from https://lucide.dev/

The theme editor’s interface allows you to configure themes for properties such as color, border radius, and mode (light or dark). You can also choose between two styles: default and new-york. The styles have unique components, animations, icons, and more. The default style has larger input fields and uses lucide-react icons and tailwindcss-animate for animations. The new-york style has smaller buttons, cards with shadows, and uses Radix Icons.

There's no first-class Lucide integration for Astro. But making a custom one isn't too hard.

5. Iconify

Website: Iconify

Icons play a vital role in the web development. They guide us, convey messages, and enhance user experiences on numerous websites and applications. Whether you are an experienced developer or a beginner in web development, having a reliable source of high-quality icons is essential. This is where Iconify comes in, providing an extensive selection of icons that will breathe life into your projects.

https://iconify.design/ has been my go to for years, but I like the ability to customize the colors from the UI, although I personally use tailwind classes for my colors

Before explaining the whole code, it is worth saying that you can get all the icons used in this tutorial are from iconify

It was positioned absolutely to the parent container and was placed at the position where it is using -bottom-8 and left-[17%], the icon use there is from iconify

Svg Icons from Iconify.

Luckily, I found that in astro you can do it easily with the astro-icon package. This package uses Iconify, an icon library that combines dozens of different icon packs into one. The most interesting icon pack for me was the SVG Logos as it includes all logos for different tech companies, programming languages, etc. Now, adding these icons is as simple as: