Next.js

Install#

npm install kineticons

App Router#

Import icons straight into Server Components. The icon renders on the server and moves on hover with no client code.

// app/page.tsx (a Server Component)
import { Rocket } from "kineticons";

export default function Page() {
  return (
    <a href="/start" className="ki-trigger">
      <Rocket variant="duotone" /> Get started
    </a>
  );
}

Pages Router#

Icons work the same way in pages and components; their CSS is added on first render.

Faster builds#

With thousands of named exports, dev builds are faster when Next optimises the import. Add the package to optimizePackageImports:

// next.config.ts
export default {
  experimental: { optimizePackageImports: ["kineticons"] },
};