DEV Community

Cover image for Beautiful NPM Icon packages for your next web project
Yeow Zi Qin
Yeow Zi Qin

Posted on â€ĸ Edited on

70 14

Beautiful NPM Icon packages for your next web project

My Favourite

These are my favourite npm icon packages

Icon pack How to install Documentation
Lucide npm i lucide or npm i lucide-react (React) Website
Tabler npm i @tabler/core or npm i @tabler/icons-react (React) Website
Boxicons npm i boxicons Website
Remix Icon npm i remixicon Github
Radix Icon npm i @modulz/radix-icons Github

Recommended

These are my personal recommendations of npm icon packages

Icon pack How to install Documentation
CoreUI Icon npm i @coreui/icons@next Website
Teenyicons npm i teenyicons Github
Bootstrap Icon npm i bootstrap-icons Website
Feather Icon npm i feather-icons Github
Octicons npm i @primer/octicons Website
Ikonate npm i ikonate Github
CSS.gg Icon npm i css.gg Github
Phosphor Icon npm i phosphor-icons Github
React-icons (for React) npm i react-icons Github
Material-UI Icon (for React) npm i @material-ui/icons Website

Hope you are getting excited!😎

Further Research:
ShapeFonts
WWEB.dev

Thanks for reading, see you in the next post.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (18)

Collapse
 
jovylle profile image
Jovylle B â€ĸ

This list is cool. Thanks

Collapse
 
hasnaindev profile image
Muhammad Hasnain â€ĸ

Please, add "ionicons" to the list. I love their icons. 1.3k, all free.

Collapse
 
ziqinyeow profile image
Yeow Zi Qin â€ĸ â€ĸ Edited

Hi Hasnain, I do like Ionicons, but note that I'm writing about npm icon packages that require npm installation, Ionicons only need a script tag, and no installation is necessary.

Collapse
 
hasnaindev profile image
Muhammad Hasnain â€ĸ

Ooh, yes, You're right.

Collapse
 
anishshettyk profile image
Anish shetty k â€ĸ

react icons are also worth mentioning
npm install react-icons

Collapse
 
ziqinyeow profile image
Yeow Zi Qin â€ĸ

Hi Anish, thanks for your warm suggestion. React-icons is damn awesome, but I'm hesitant to include this because I'm making this post aiming for general usage, not framework specific. I'm not sure if 'react-icons' is suitable for other frameworks as well.

Collapse
 
anishshettyk profile image
Anish shetty k â€ĸ

it works with MeteorJS and gatsby js along with react

Collapse
 
ashishk1331 profile image
Ashish Khare😎 â€ĸ

Thanks for sharing. Plus, you could try iconsvg.xyz. They provide in site editing for icons.

Collapse
 
alco profile image
Jakub Stibůrek â€ĸ

Thanks for sharing. It will save me some googling.

Collapse
 
dawnind profile image
Mainak Das â€ĸ

Just searching yesterday about the same thing 🤩

Collapse
 
msboffl profile image
Mareedu Saibabu â€ĸ

Thanks for valuable information bro...

Collapse
 
itscasey profile image
Casey 💎 â€ĸ

Cool! Typically I go with Feather but after seeing some of these I may have to try others

Collapse
 
core_ui profile image
CoreUI â€ĸ

Thanks Yeow for your recommendation! Have you tried both Free and Pro icons?

Collapse
 
ziqinyeow profile image
Yeow Zi Qin â€ĸ

Hi CoreUI, what I know is CoreUI icons are free.

Collapse
 
core_ui profile image
CoreUI â€ĸ

Of course, we're open source and to give developer additional option - we've mastered also PRO versions of the most popular solutions. If you wanna try, pm me

Collapse
 
damiensn profile image
Damien S â€ĸ

Thanks for sharing ! For me, I love ion-icons

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Playwright CLI Flags Tutorial

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • 0:56 --last-failed: Zero in on just the tests that failed in your previous run
  • 2:34 --only-changed: Test only the spec files you've modified in git
  • 4:27 --repeat-each: Run tests multiple times to catch flaky behavior before it reaches production
  • 5:15 --forbid-only: Prevent accidental test.only commits from breaking your CI pipeline
  • 5:51 --ui --headed --workers 1: Debug visually with browser windows and sequential test execution

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

Watch Full Video 📹ī¸

👋 Kindness is contagious

If you found this post useful, consider leaving a ❤ī¸ or a nice comment!

Got it