Icons for Next.js App Router
The Next.js App Router introduced Server Components which changed how frontend libraries must be built. Icon libraries that use React context, browser APIs, or client-side state break in Server Components. This page covers only icon libraries that are verified to work correctly in Next.js App Router without any special configuration or use client directives.
WHY THIS MATTERS
//Using an incompatible icon library with Next.js App Router causes runtime errors that are difficult to debug. The error messages are often cryptic — "You cannot use useState in a Server Component" — when the real cause is an icon library that internally uses React hooks.
RECOMMENDED FOR ICONS FOR NEXT.JS APP ROUTER
DESIGN TIPS
Always check if an icon library has specific Next.js App Router documentation before using it
Libraries that render pure SVG with no React hooks or context are always safe in Server Components
Lucide React, Heroicons, and Radix Icons are all confirmed Server Component compatible
If you must use a non-compatible library, wrap it in a Client Component with use client
Test icon rendering in both Server and Client Components during development
MUST-HAVE ICONS FOR THIS USE CASE
COMMON MISTAKES TO AVOID
Using icon libraries that internally use useState or useContext
Not testing icons in actual Server Components before shipping
Wrapping every icon in use client when it is not necessary
Using icon font libraries like Font Awesome which require DOM manipulation