Qwik Icons
Include popular icons easily in your Qwik projects with @qwikest/icons 🚀
Currently included libraries (with icon prefix):
-
Bs: Bootstrap Icons -
Fa: Font Awesome 6 Free -
Fl: Flowbite Icons -
Go: Octicons by GitHub -
Hi: Heroicons by Tailwind -
In: Iconoir -
Io: Ionicons by Ionic -
Lu: Lucide [superset of feather icons] -
Mo: Mono Icons -
Mat: Material 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/iconsUsage
If you want to, you can also directly start playing around with the package in this code sandbox – no setup needed 👀
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>
);
});Available Libraries
import { Bs1Circle } from "@qwikest/icons/bootstrap";
import { Fa0Solid } from "@qwikest/icons/font-awesome";
import { FlAdressBookSolid } from "@qwikest/icons/flowbite";
import { HiAcademicCapMini } from "@qwikest/icons/heroicons";
import { In1StMedal } from "@qwikest/icons/iconoir";
import { IoAirplaneOutline } from "@qwikest/icons/ionicons";
import { LuRocket } from "@qwikest/icons/lucide";
import { MatGifBoxSharp } from "@qwikest/icons/material";
import { MoAdd } from "@qwikest/icons/monoicons";
import { GoFlame24 } from "@qwikest/icons/octicons";
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