Next.js | What to use for icons?
Should I use <Image /> component from 'next/image' for icons or should I use something like react-icons for that instead?
React Icons
Include popular icons in your React projects easly with react-icons.
2 Replies
Font Awesome is a good choice https://fontawesome.com/v5/docs/web/use-with/react
React
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
We made a dedicated react control for a front-end framework that I created and maintained that implements Microsoft's Fluent Design. It lets you load a SVG symbol/glyph set into React. This way, you can manage all the assets from one or more centralised SVG files directly. Instead of messing around with copy SVG directly into your React code.
https://lab.n8d.studio/htwoo/htwoo-react/?path=/docs/introduction-getting-started--docs#3-initialze-basic-svg-icons
The Benefit - It's easy to update and maintain.
https://css-tricks.com/pretty-good-svg-icon-system/
This supports nearly 3000+ icons, too, with a minimal impact because you can pick and choose which icons to embed and can even add your own stuff, such as custom logos or select single or multiple icons from other icon systems.
https://lab.n8d.studio/htwoo/htwoo-core/patterns/design-tokens-icon-overview/design-tokens-icon-overview.rendered.html
Chris Coyier
CSS-Tricks
A Pretty Good SVG Icon System | CSS-Tricks
I've long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design