Salah Icons

Free Islamic icons for apps and websites — prayer, Qur'an, wudu, prayer times, mosque, Ramadan, dua and Eid. 149 duotone glyphs on a 240×240 canvas, themeable with CSS variables.

npm i salah-icons

Using an icon

Every icon is a plain SVG file with no dependencies:

import wudu from 'salah-icons/icons/wudu/wash-hands.svg';

<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). There is no style attribute on the <svg>, which is what makes the icons 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 file's 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>

Any six colours of your own work just as well:

.brand-icons {
  --ink: #7A1F1F;
  --tone: #F0C4C4;
  --halo: #FBEAEA;
  --paper: #FFFFFF;
  --soft-line: #C98A8A;
  --mid-line: #A34A4A;
}

| 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. They are in palettes.json as data and palettes.css as classes.

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

Sprite

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

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

Symbols carry the same fallbacks, so <use> retints from an ancestor too.

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. Credit with one line anywhere you keep credits — see ATTRIBUTION.md:

Icons by Salah Icons — CC BY 4.0