Qwik Icons

Include popular icons easily in your Qwik projects with @qwikest/icons 🚀

Currently included libraries (with icon prefix):

• Bs: Bootstrap Icons
• Go: Octicons by GitHub
• Hi: Heroicons by Tailwind
• In: Iconoir
• Io: Ionicons by Ionic
• Lu: Lucide [superset of feather icons]
• Mo: Mono Icons
• Si: Simple Icons [icons for popular brands]
• Tb: Tabler Icons

Installation

Simply install the package with your package manager of choice:

npm i @qwikest/icons
yarn add @qwikest/icons
pnpm add @qwikest/icons

Usage

import { LuRocket } from "@qwikest/icons/lucide";

export const MyComponent = component$(() => {
  // Icon size and color are inherited by default ⬇️
  return (
    <div style={{ color: "red", fontSize: "40px" }}>
      <LuRocket />
    </div>
  );
});

Variants

A few libraries support different icon variants. They can be configured via useContext or directly via props. Feel free to use the context to specify a global default 🙏

export const MyComponent = component$(() => {
  useContextProvider(IoContext, { variant: "outline" });

  // IoAccessibility will infer `variant: outline` ⬇️
  return (
    <div>
      <IoAccessibility />
      <IoAddCircle variant="sharp" />
    </div>
  );
});

Some libraries like Octicons even support different viewBoxes. Use the res property to specify them. Each icon library comes with a props type (like LuProps) which contains all possible variants!

Available Libraries

import { Bs1Circle, .. } from "@qwikest/icons/bootstrap";
import { GoFlame24, .. } from "@qwikest/icons/octicons";
import { HiAcademicCapMini, .. } from "@qwikest/icons/heroicons";
import { In1stMedal, .. } from "@qwikest/icons/iconoir";
import { IoAirplane, .. } from "@qwikest/icons/ionicons";
import { LuRocket, .. } from "@qwikest/icons/lucide";
import { MoAdd, .. } from "@qwikest/icons/mono-icons";
import { Si1Password, .. } from "@qwikest/icons/simpleicons";
import { Tb123, .. } from "@qwikest/icons/tablericons";

Missing a library? Feel free to open an issue or even a MR 🤝

Upcoming

• 🖌️ Configurable stroke width for supported packages
• 🎁 Additional icon libraries
• 🎨 Built-in company based colors for simple icons