Header Juz name SVGs

Juz info

Juz name artwork as it appears in a Mushaf page header, one SVG per juz (juz-01.svg … juz-30.svg).

These are the same shapes as the juz name header font, in a form you can recolour or scale without shipping a font.

Download Links

Using these images

This download is a zip of 30 SVG files, one per juz. Each file is plain SVG — no fonts, no scripts — so it renders anywhere SVG does: the web, React Native, Android, iOS, print and design tools.

These are the same shapes as the Juz name header font. Reach for the font when you are rendering text and want the artwork to flow with it; reach for these images when you want a picture you can place, scale and recolour on its own.

1. File names

Files are named by number, zero padded, so you can build a path from an index without a lookup table:

juz-01.svg
juz-02.svg
…
juz-30.svg

2. Serve them from the CDN, or ship your own copy

Every file is already on the QUL CDN under https://static-cdn.tarteel.ai/qul/fonts/svg/header-juz-svg/. Use it directly, or download the zip above and serve the files from your own site.

HTML

<img src="https://static-cdn.tarteel.ai/qul/fonts/svg/header-juz-svg/juz-01.svg"
     alt="Header Juz name SVGs"
     height="48">

3. Sizing

Each file carries a viewBox along with a width and height in user units, and the artwork is not a fixed aspect ratio — a long name is a wider image. Set one dimension (usually the height, to match a line of text) and let the other follow:

CSS

.header-art {
  height: 48px;
  width: auto;
}

4. Recolouring

The paths carry no fill of their own, so they inherit one. Inline the SVG (or load it with <object>) and set fill on it — including currentColor, which follows the surrounding text colour and makes dark mode free:

CSS

.header-art svg {
  fill: currentColor;
}

An SVG loaded through <img> cannot be recoloured by your CSS — the page cannot reach inside it. Either inline the markup, or use the file as a mask-image and paint with background-color.

5. Accessibility

Each file has a <title> holding the Arabic name, which screen readers announce when the SVG is inlined. With <img>, write the name into alt yourself — or set alt="" when the name is already in the text beside it.

Licence

These images are CC BY 4.0. The licence line sits in a comment at the top of every file; keep it there, and credit QUL where you credit your other sources.

Related Resources

Juz name header font

Tags