One place for both collections. 150 subjects in SVG and 3D, with downloads, Figma components and code examples.
Scalable duotone vectors with customizable colors. All 150 icons in Green, Blue and Dark palettes.
Includes themeable SVGs and copies with fixed palette colors. The themeable set uses your selected palette as its default.
themeable/ contains one set with CSS color variables. Inline these SVGs to apply your own colors.
baked/green/, baked/blue/ and baked/dark/ contain all three palettes with colors written into the files.
Rendered illustrations with soft lighting and sage colors. All 150 icons with white circular backdrops, transparent outer edges, and fixed colors.
Browse & download 3D iconsOpen any icon to download it individually:
512px is a useful starting point for apps and websites. Get the full collection through npm or Figma.
For a single icon, open its preview in the gallery. SVG previews offer SVG, JSX and PNG export; 3D previews offer PNG sizes and WebP.
SVG files, a symbol sprite, palette styles and searchable metadata.
npm install salah-iconsAll 150 PNGs at 512px, plus metadata. Download larger sizes individually from the gallery.
npm install salah-icons-3dCopy the Community file to your drafts, browse the categories, and copy an icon instance into your design.
Choose Green, Blue or Dark with the Palette property. Use the Scale tool (K) to resize artwork and strokes together.
Copy the Community file to your drafts and use its 150 components, each with an embedded 1024px PNG.
Resize the components to fit your layout. The artwork has fixed colors, white circular backdrops, and transparent outer edges; it is not an editable 3D model.
Community copies do not receive updates automatically. Revisit the libraries for new releases.
Copy a downloaded SVG into your public assets folder and reference it:
<img src="/icons/wash-hands.svg"
alt="Wash hands"
width="120" height="120">SVGs scale without losing quality. An image element uses the colors saved in the file; inline the SVG markup to customize its CSS variables.
Import a PNG with Vite or another bundler that supports image URLs:
import lantern from
'salah-icons-3d/icons/ramadan/lantern.png';
<img src={lantern}
alt="Ramadan lantern"
width={160} height={160} />With Next.js, pass the import to next/image, or use its .src in a plain image element. You can also copy PNGs into your public assets folder.
Use descriptive alternative text when an icon conveys meaning, or alt="" when it is decorative.
Each SVG color uses var(--token, #default). Inline the markup to apply variables from an ancestor; CSS variables outside an <img> do not reach inside its SVG file.
@import 'salah-icons/palettes.css';<div class="icons-blue">
<!-- Paste the SVG markup here. -->
</div>Built-in palettes are green, blue and dark. You can also set your own six colors.
| Variable | Purpose |
|---|---|
--ink | Strokes |
--tone | Filled shapes |
--halo | Backdrop circle |
--paper | Light surfaces, including hands, faces and pages |
--soft-line, --mid-line | Reserved for additional detail |
These palette variables apply to SVGs. PNG colors are part of the rendered image.
The SVG package includes sprite.svg. Copy it to your public folder and reference a symbol by its icon ID:
<svg width="120" height="120"
role="img" aria-label="Wash hands">
<use href="/sprite.svg#si-wash-hands" />
</svg>Both packages include metadata.json with stable IDs, names, categories, tags and aliases such as salat, namaz and ablution. Matching IDs let you switch between SVG and 3D for the same subject. The 3D metadata also includes image dimensions and hashes.
Both collections use CC BY 4.0. Include credit wherever you keep acknowledgments:
Icons by SalahIcons.com — CC BY 4.0