Installation — FZHUB

FZ Icons is an SVG icon library with a Saudi and Arabic touch. It uses a 24 pixel grid and picks up your text color automatically. You can browse the icons on the library page. The current version is 0.1.0, with 20 icons.

The npm package @fzhub/icons is coming soon. The way that works today is the hosted links on this page.

Option 1: script

Add the script to your page, then use the fz-icon tag anywhere.

<script src="https://fzhub.tech/libs/fz-icons/0.1.0/fz-icons.js"></script>

<fz-icon name="dallah"></fz-icon>
<fz-icon name="palm" size="32"></fz-icon>

Attribute	Description	Default
`name`	Icon name	none
`size`	Size in pixels, or any CSS value	`1em`
`stroke`	Line thickness	`2`
`label`	Text for screen readers	Icon is hidden from screen readers

The script also provides window.FZIcons, which can replace any element with data-fz:

<i data-fz="souq" data-size="20"></i>

<script>
  FZIcons.replace();
</script>

Option 2: ES module

This works directly in the browser with no build tools, and returns the icon as an SVG string.

import { toSvg } from 'https://fzhub.tech/libs/fz-icons/0.1.0/index.js';

el.innerHTML = toSvg('souq', { size: 20 });

`toSvg` option	Description	Default
`size`	Size	`24`
`strokeWidth`	Line thickness	`2`
`color`	Color	`currentColor`
`class`	CSS class	none
`title`	Title for screen readers	none

The function returns an empty string if the icon name does not exist.

Option 3: sprite

One SVG file holds all the icons. Download the sprite file, put it on your website, and use the icon name with the fz- prefix.

<svg width="24" height="24">
  <use href="/fz-icons.svg#fz-finjan"/>
</svg>

The file must be on the same domain as your website, because browsers do not allow <use> from another domain.

Color

Icons take the text color, so you change them with CSS:

.brand-icon {
  color: #a3262a;
}

Icon names

dallah  finjan  palm  dates  tent  mabkhara  fanous  crescent
najdi-house  dunes  mashrabiya  mosque  qibla  hijri-calendar
national-id  arabic-letter  text-rtl  souq  dhow  sadu

For the terms of use, see licenses.