Kitten icons

A subset of the Phosphor icon set by Helena Zhang and Tobias Fried in Kitten component format.

The main difference with the original set is that some icons have been removed and some have been renamed to bring the library in line with the Small Technology Principles.

Specifically:

• All brand icons for Big Tech/Silicon Valley/surveillance capitalists/people farmers have been removed.

• The words ‘user’ and ‘users’ have been replaced with ‘person’ and ‘people’. (In Small Tech and on the Small Web we don’t have users, we have people, and we treat them as such.)

  e.g., The Phosphor icon called user-check exists as a Kitten component at kitten.icons.p.PersonCheck. The icon “user” has been renamed to “person-close-up” (as there is already a “person” icon) and may be found at kitten.icons.p.PersonCloseUp.

• The BTC icon has been removed (proof of work; environmental concerns).

Usage

This module is meant to be run in Kitten and is included in Kitten.

Finding icons

In your Kitten app, you can access the icons as simple Kitten components at the following namespace:

kitten.icons

In that namespace, you browse the icons in three ways:

• Alphabetically, e.g., kitten.icons.c.Cat
• In categories, e.g., kitten.icons.categories.nature.Cat
• Using tags, e.g., kitten.icons.tags.kitten.Cat

To get autocompletion in your editor, your editor must support the TypeScript language server (any modern code editor worth using will e.g., Helix editor, etc.) and you must install and use the type-safe Kitten globals module:

import kitten from '@small-web/kitten'

kitten.icons.categories. // Will show a pop-up with list of categories in your editor.

You can also search for icons on the Phosphor icons page. The tags and categories objects in Kitten are based on the same core metadata from the Phosphor library. Just remember that Kitten doesn’t have all the icons and some are named differently (see the top of this page for details).

💡 It is generally safer to address components via the alphabetical path in your code as it’s possible that the Phoshor library might remove or change tags or even possibly categories in the future and updates to this module will automatically reflect those changes. So use the .categories and .tags indices to make it easier to find icons during authoring but then use the alphabet-prefix notation in your code.

🔍 You might be wondering why the icons are split up alphabetically instead of having them all in the global namespace. It’s due to an undocumented 4MB memory size limitation in the TypeScript language server where type checking (and thus completions) are disabled for imported modules over this limit unless the source code of the module itself is open in your editor in the same workspace/language server session. It also keeps the language server and thus the initial pop-up and navigation of the completions snappy.

Using icon components

You can use the components in your kitten.html as you would any other Kitten component.

e.g., A simple Kitten page that displays a large, pink cat icon in duotone:

export default function () {
  return kitten.html`
    <${kitten.icons.c.Cat}
      size=40%
      weight=duotone
      colour=deeppink
    />
  `
}

As the icons are Kitten components, you can customise how they appear by passing properties (‘props’) to them:

• alt: Alternative text (alt-text). Provide this to explain the purpose of the icon for people who use screen readers. If no alt text is provided, it will default to the name of the icon.

• colour: Pass a CSS colour. Defaults to currentColor, which will pick up the colour of its context.

• weight: One of regular, light, thin, fill, or duotone. Defaults to regular.

• size: Pass a CSS measurement to use as the width/height (the icons are square). Defaults to 1em.

• mirror: Pass a boolean. Mirroring can be useful in right-to-left layouts. Defaults to false.

And other props you provide will be passed as attributes to the SVG tag of the icon.

Extending icon components

You can extend the SVG (e.g., to add animation, etc.) by slotting any valid SVG content into it.

e.g., This makes the cat into a Cheshire cat (fades in and out):

export default function () {
  return kitten.html`
    <${kitten.icons.c.Cat}
      size=40%
      weight=duotone
      colour=deeppink
    >
      <animate
        attributeName="opacity"
        values="0;1;0"
        dur="3s"
        repeatCount="indefinite"
      />
    </>
  `
}

While the above example is good for a one-time use modification, you can, of course also make a reusable CheshireCat component.

Here’s one that has all the same defaults as the one in the above example but is fully configurable via props.

💡 Notice how it passes any other props it receives to the base component it is extending via composition.

const CheshireCat = ({duration = 3, minOpacity = 0, maxOpacity = 1, ...props}) => {
  return kitten.html`
    <${kitten.icons.c.Cat} ...${props}>
      <animate
        attributeName="opacity"
        values="${minOpacity};${maxOpacity};${minOpacity}"
        dur="${duration}s"
        repeatCount="indefinite"
      />
    </>
  `
}

export default function () {
  return kitten.html`
    <${CheshireCat}
      size=40%
      weight=duotone
      colour=deeppink
    />
  `
}

Development

This section is only important for you if you’re developing on Kitten icons. You don’t need to do any of this just to use them.

Generate

To generate the icons, run:

npm run generate

This will recreate the icons.mjs file.

Like this? Fund us!

Small Technology Foundation is a tiny, independent not-for-profit.

We exist in part thanks to patronage by people like you. If you share our vision and want to support our work, please become a patron or donate to us today and help us continue to exist.

Helena and Tobias also accept donatios for Phosphor icons. You can buy them a coffee or become a patron of Phosphor icons.

Questions?

Contact Aral on the fediverse.