Icons

@qeetrix/icons has 1,863 icons, each drawn in a round and a sharp shape, plus Qeet's own logo and wordmark.

Import an iconCopy Anchor Link

Import icons from the package root:

import { StarIcon, TrashIcon } from "@qeetrix/icons";

export function Favourite() {
  return <StarIcon />;
}

In a libraryCopy Anchor Link

Bundlers keep only the icons you import. Code that runs without a bundler — a test runner or a script — loads every icon from the root, about 1.6 s once per process in plain Node. A library that apps test against, like @qeetrix/ui, imports each icon from its own path instead, so its consumers never pay that:

import { StarIcon } from "@qeetrix/icons/icons/star";

Shape, variant and sizeCopy Anchor Link

<StarIcon />
<StarIcon variant="filled" />
<StarIcon shape="sharp" />
<StarIcon shape="sharp" variant="filled" />
<StarIcon size={32} />

Every icon has both shapes. variant is typed per icon, so asking for a drawing that an icon doesn't have is a type error. Icons also accept any <svg> prop, such as className or aria-label.

Qeet logosCopy Anchor Link

QeetLogo is the "q" mark and QeetWordmarkLogo is Qeet. in a tile. Each renders its SVG file, unmodified, as an <img>, so the page can't recolour it. Logos are only exported from the package root.

VariantsCopy Anchor Link

Light and darkCopy Anchor Link

An image can't see your app's theme, so render both files and let your theme show one. With Qeetrix's .dark class, that's the dark: variant:

import { QeetLogo } from "@qeetrix/icons";

export function Brand() {
  return (
    <>
      <QeetLogo aria-label="Qeet" className="inline-block dark:hidden" />
      <QeetLogo aria-label="Qeet" variant="dark" className="hidden dark:inline-block" />
    </>
  );
}

Size and labelsCopy Anchor Link

Logos are decorative by default. Pass aria-label or alt to name one, and height (default 24) to size it; the width follows the logo's own aspect ratio.

Third-party logosCopy Anchor Link