react-icons VS lucide

If you've ever used React, you've probably come across the excellent react-icons library — a single, tree-shakeable, well-typed icon package that just works.

13. React Icons

Great resource.

Has anyone come across a semantic search to navigate these icon libraries? I want to be able to search for “Industry” and get icons returned that show factory, cogs etc. I’ve been using https://react-icons.github.io/react-icons but the same problem there, you search for a string and it just greps across the official icon name. If you don’t know the name you’re not going to find it.

2. React Icons Website: https://react-icons.github.io/react-icons/

React Icons: A portfolio needs visual elements to engage visitors. React Icons gives us access to social media icons for your profiles, tech stack icons for your skills section, and UI icons for navigation and interaction.

React Icons for lightweight icons

Resource: React Icons Documentation

This was just a tiny change but I did discover something that is really neat from working on this. I found out, from looking into how the other items on the menu has icons, that its using icons from react-icons. Where you can easily import the icons and implement them as components. They also work light and dark mode, where they change automatically when the user change color modes. If it weren't for this, I would look for an .png of the settings icon and add the image beside the text and I would need to for light and dark mode.

react-icons - lib de icones para react.

While I looking for my second issue I came across rails_icons. It reminded me of react-icons but for rails. Since I have have some experience in Ruby on rails and its been a while since I used it so I wanted to get some practice.

Explore Now

Website: https://lucide.dev/

Website: Lucide Icons GitHub Repo: GitHub Repo

Lucide

Lucide React Documentation

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/