Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Feather Icons for Qwik

What is Feather?

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and flexibility.

This icon library supports Feather Icons v4.29.0.


npm install --save qwik-feather-icons



You can import the icon(s) you need as usual:

import { ThumbsUpIcon } from "qwik-feather-icons";

or import them all at once:

import * as IconPack from "qwik-feather-icons";

export const App = component$(() => {
  return (
      <IconPack.ThumbsUpIcon />
      <IconPack.BatteryChargingIcon />


All icons have these optional props:

export interface IconProps {
    size?: number,
    color?: string,
    strokeWidth?: number,
    strokeLineCap?: string,
    strokeLineJoin?: string,
    class?: string

With default values defined in a defaultIconProps object:

export const defaultIconProps: IconProps = {
  size: 24,
  color: "currentColor",
  strokeWidth: 2,
  strokeLineCap: "round",
  strokeLineJoin: "round",
  class: ""

Icon Component

This icon library has an Icon component with a required prop called name:

import { Icon } from "qwik-feather-icons";

export const App = component$(() => {
  return (
      <Icon name="battery-charging" /> { /* equivalent to <BatteryChargingIcon /> */ }

Although is better to use the <'Name'Icon /> variant (such as <ThumbsUpIcon />) because it wraps the actual inline <svg>.


Feather icons use Qwik Context to simply apply default props to all icons. Use useContextProvider at the root of the app (or anywhere above the icons in the tree) and pass in a configuration object with props to be applied by default to all icons.

import { component$, useContextProvider } from "";
import { IconContext, WifiOffIcon, ThumbsUpIcon } from "qwik-feather-icons";

export const App = component$(() => {
  const newDefaultProps = {
    size: 96,
    color: "hotpink",
    strokeWidth: 2,
    strokeLineCap: "round",
    strokeLineJoin: "round",
    class: "just an example"

  useContextProvider(IconContext, newDefaultProps);

  return (
      <ThumbsDownIcon /> { /* huge (96px) hotpink icon */ }
      <WifiOffIcon />    { /* same here */ }


This package is licensed under the MIT License.


Thanks to Cole Bemis for the Feather Project. Here is his website