kitten-icons

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 icon user-check can be found as a Kitten component at kitten.icons.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.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.

In your Kitten app, you can access the icons via:

kitten.icons.IconName

e.g., A simple Kitten page that displays a large cat icon.

export default () => kitten.html`
  <${kitten.icons.Cat} width=50% />
`

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 currentColour, 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.

• mirrored: 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.

You can also 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):

<${kitten.icons.Cat} width=50%>
  <animate
    attributeName="opacity"
    values="0;1;0"
    dur="3s"
    repeatCount="indefinite"
  />
</>

There are also two objects on kitten.icons to make finding icons easier while authoring:

• categories
• tags

Using the Kitten’s interactive shell (REPL), you can explore the contents of these indices to find what you’re looking for even if you don’t know the exact name of the icon.

e.g.,

kitten.icons.tags.animals

Outputs:

{
  Barn: [Function (anonymous)],
  Bird: [Function (anonymous)],
  Butterfly: [Function (anonymous)],
  Cat: [Function (anonymous)],
  Cow: [Function (anonymous)],
  Dog: [Function (anonymous)],
  Fish: [Function (anonymous)],
  FishSimple: [Function (anonymous)],
  Horse: [Function (anonymous)],
  LinuxLogo: [Function (anonymous)],
  PawPrint: [Function (anonymous)]
}

And kitten.icons.tags.animals.Cat is the same component as kitten.icons.Cat.

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 Phosphor. Just remember that Kitten doesn’t have all of the icons and some are named differently (see the top of this page for details).

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.