Getting started

149 duotone icons on a 240×240 canvas, themeable with CSS variables. Free under CC BY 4.0.

Install

npm i salah-icons

Use an icon

Every icon is a plain SVG file with no dependencies:

<img src="node_modules/salah-icons/icons/wudu/wash-hands.svg"
     alt="Wash hands" width="120" height="120">

Theming

Every colour in every icon is written as var(--token, #default), and there is no style attribute on the <svg>. That is what makes them genuinely retintable:

As a file — <img src="…"> or a CSS background — the icon renders in the default green palette, because the fallbacks carry it.
Inlined — paste the markup into your page — it picks up whatever you set on any ancestor.

@import 'salah-icons/palettes.css';

<div class="icons-blue">
  <!-- paste the contents of any icon file here -->
</div>

Variable	What it paints
`--ink`	every stroke
`--tone`	the filled shapes
`--halo`	the backdrop circle
`--paper`	shapes that must stay light — hands, faces, pages
`--soft-line`, `--mid-line`	reserved for future detail work

Three palettes ship: green (the default), blue and dark. Any six colours of your own work just as well.

An <img> tag isolates the document, so an ancestor’s variables cannot reach it — that is a rule of the web, not of this set. Use the files as they are for the default colours, or inline them to retint.

Downloading the set

Download ZIP gives you the whole set in every palette:

Folder	Contents
`themeable/`	One copy where every colour is `var(--token, #default)` and the `<svg>` has no `style` attribute. Each file renders on its own using those defaults, and picks up your values when you inline it and set the variables on an ancestor. The defaults are whichever palette was selected when you downloaded.
`baked/green/`, `baked/blue/`, `baked/dark/`	The same icons with the colours written in, for Figma and anything that does not understand CSS variables.

Sprite

sprite.svg holds every icon as a <symbol>, so one request covers the set:

<svg class="icons-green" width="120" height="120">
  <use href="/sprite.svg#si-wash-hands"/>
</svg>

Metadata

metadata.json lists every icon with its id, name, category, tags and transliteration aliases — enough to build a picker. Aliases cover spellings such as salat, namaz, sholat and ablution.

Licence

Icons are CC BY 4.0. One credit line covers the whole set — see Licence & attribution.