Icon Fonts · Icons for J1 Template

An icon font is a special font where each character is a small picture instead of a letter. Icon fonts give you sharp, scalable icons that can be coloured and styled with CSS just like text. The J1 Template includes several popular icon fonts ready to use.

The following icon sets are available out-of-the-box:

Material Design Icons (MDI)
Light Material Design Icons (MDIL)
FontAwesome Icons V5 (FA)
Iconify Framework Icons (IF)

MDI and FA are widely used and offer thousands of icons for many topics. See the sections Material Design Icons and FontAwesome Icons for examples and details.

MDI and FA icons are bundled with the J1 Template — they live on your own website. Iconify icons are different: they are loaded over the Internet on demand from a remote service. See the [Iconify-Framework Icons] section for more.

5-10 Minutes to read.

Material Design Icons

Material Design Icons (MDI) is the main icon set in the J1 Template. With more than 7,200 icons (as of version 7, March 2023), it covers nearly every topic you can think of.

MDI follows the Material Design style created by Google and includes Google’s own original icon set. It is a community project, which means new icons are added all the time.

Table 1. Material Design Icons
Size	Modifier	Markup
1x	no modifier set	All icons can be found for preview at the Font Icon Picker page online. No modifiers `mdi:account[1x]`
3x	no modifier set	All icons can be found for preview at the Font Icon Picker page online. No modifiers `mdi:account[3x]`
5x	no modifier set	All icons can be found for preview at the Font Icon Picker page online. No modifiers `mdi:account[5x]`
5x	`mdi-rotate-45`	All icons can be found for preview at the Font Icon Picker page online. Rotate 45 degrees `mdi:account[5x mdi-rotate-45]`
5x	`mdi-rotate-315`	All icons can be found for preview at the Font Icon Picker page online. Rotate 315 degrees `mdi:account[5x mdi-rotate-315]`
5x	`mdi-light` `mdi-flip-v`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) light-grey and flipped vertical `mdi:alert[5x mdi-light mdi-flip-v]`
5x	`md-indigo`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) indigo `mdi:alert[5x md-indigo]`
5x	`md-pink`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) pink `mdi:alert[5x md-pink]`
5x	`mdi-spin`	All icons can be found for preview at the Font Icon Picker page online. Added animation of type rotate (spin) `mdi:loading[5x mdi-spin]`
5x	`md-red-900` `mdi-pulsed`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) color dark-red and added animation of type pulsed `mdi:heart[5x md-red-900 mdi-pulsed]`

You can place an MDI icon anywhere in your text by using the inline macro mdi:. For more details, see Asciidoc Extensions.

The J1 Template ships with the full MDI icon set. Everything is already set up — there is nothing extra to install.

Light Material Design Icons

Material Design Light Icons (MDIL) is a lighter, thinner version of MDI. The icons have the same Material Design style but with finer strokes. The set is smaller than MDI — around 260 icons in the latest version.

Table 2. Material Design Light Icons
Size	Modifier	Markup
1x	no modifier set	All icons can be found for preview at the Font Icon Picker page online. No modifiers `mdil:account[1x]`
3x	no modifier set	All icons can be found for preview at the Font Icon Picker page online. No modifiers `mdil:account[3x]`
5x	no modifier set	All icons can be found for preview at the Font Icon Picker page online. No modifiers `mdil:account[5x]`
5x	`mdi-rotate-45`	All icons can be found for preview at the Font Icon Picker page online. Rotate 45 degrees `mdil:account[5x mdi-rotate-45]`
5x	`mdi-rotate-315`	All icons can be found for preview at the Font Icon Picker page online. Rotate 315 degrees `mdil:account[5x mdi-rotate-315]`
5x	`mdi-light` `mdi-flip-v`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) light-grey and flipped vertical `mdil:alert[5x mdi-light mdi-flip-v]`
5x	`md-indigo`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) indigo `mdil:alert[5x md-indigo]`
5x	`md-pink`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) pink `mdil:alert[5x md-pink]`
5x	`md-red-900` `mdi-pulsed`	All icons can be found for preview at the Font Icon Picker page online. Color set to (md) color dark-red and added animation of type pulsed `mdil:heart[5x md-red-900 mdi-pulsed]`

FontAwesome Icons

FontAwesome is a popular CSS-based icon toolkit, originally created by Dave Gandy. Earlier versions (up to V4) were used mainly with older Bootstrap, but FontAwesome V5 (released December 2017) works with every modern web framework. The free version of V5 includes more than 1,400 icons.

FontAwesome V5 comes in two flavours:

FontAwesome Free — about 900 icons, free for any use,
FontAwesome Pro — the full set with 2,300+ icons, requires a paid licence.

The free versions (everything up to V4 and the V5 Free package) are licensed under SIL Open Font License 1.1, Creative Commons Attribution 4.0, and the MIT License. The J1 Template includes the Free version of FontAwesome V5 — no extra setup needed.

The J1 Template extends the FontAwesome V5 CSS so the same class names work for all the icon sets. For example, the FA class fa-flip-vertical is also available as the shorter fa-flip-v.

You can browse all the available icons at FontAwesome Icons.

If you have used FontAwesome V4 before, please note that V5 is different in many ways — not just a face-lift. We recommend reading the Get started pages to learn the basics and feature changes of the current version.

In V5, FontAwesome icons are split into two groups:

Standard icons (FAS) — general-purpose icons,
Brand icons (FAB) — logos and symbols for companies and brands.

You can use FontAwesome icons in AsciiDoc with the inline macros fas: (standard icons) and fab: (brand icons). For more details, see Asciidoc Extensions.

Examples of both sets follow below.

Brand icons

Table 3. FontAwesome Branding Icons (FAB)
Size	Modifier	Markup	Render
2x	no modifier set	All icons can be found for preview at the FA Gallery page online. No modifiers `fab:google[2x]`
5x	`md-blue`	All icons can be found for preview at the FA Gallery page online. Color blue `fab:blogger[5x md-blue]`

Standard icons

Table 4. FontAwesome Standard Icons (FAS)
Size	Modifier	Markup
1x	no modifier set	All icons can be found for preview at the FA Gallery page online. No modifiers `fas:user[1x]`
3x	no modifier set	All icons can be found for preview at the FA Gallery page online. No modifiers `fas:user[3x]`
5x	no modifier set	All icons can be found for preview at the FA Gallery page online. No modifiers `fas:user[5x]`
5x	`fa-rotate-90`	All icons can be found for preview at the FA Gallery page online. Rotate 90 degrees `fas:user[5x fa-rotate-90]`
5x	`md-indigo`	All icons can be found for preview at the FA Gallery page online. Color set to MD Indigo `fas:user[5x md-indigo]`
5x	`md-pink`	All icons can be found for preview at the FA Gallery page online. Color set to MD Pink `fas:user[5x md-pink]`
5x	`mdi-light`	All icons can be found for preview at the FA Gallery page online. Color set to MD Light (Grey) `fas:exclamation-triangle[5x mdi-light]`
5x	`fa-flip-v`	All icons can be found for preview at the FA Gallery page online. Orientation is set to flipped vertical `fas:exclamation-triangle[5x fa-flip-v]`
5x	`md-red-900` `fa-flip-v`	All icons can be found for preview at the FA Gallery page online. Color set to MD dark red and flipped vertical `fas:exclamation-triangle[5x md-red-900 fa-flip-v]`
5x	`fa-spin`	All icons can be found for preview at the FA Gallery page online. Added animation of type spin (rotate) `fas:circle-notch[5x fa-spin]`
5x	`md-red-900` `fa-pulsed`	All icons can be found for preview at the FA Gallery page online. Color set to MD dark red and added animation of type pulsed `fas:heart[5x md-red-900 fa-pulsed]`

Iconify framework icons

What if you need an icon that is not in MDI or FontAwesome — a specific brand icon, a niche topic? Iconify is a service that solves this problem. It is a single, online icon library that brings together icons from many different sets.

The J1 Template includes the Iconify JavaScript client out of the box. The client is only loaded when you actually use an Iconify icon, so it does not slow down pages that do not need it. To browse the available icons, visit Iconify Icon Sets.

Using Iconify icons with the J1 Template is easy. The inline macro iconify: lets you place icons anywhere in your text. For more details, see Asciidoc Extensions.

Iconify currently offers more than 40,000 vector icons covering many topics. A few examples are shown below.

Table 5. Brand Icons
Size	Modifier	Markup
3x	no modifier set	All icons can be found for preview at SVG Logos page online. No modifiers `iconify:logos:opensource[3x]`
3x	no modifier set	All icons can be found for preview at SVG Logos page online. No modifiers `iconify:logos:asciidoctor[3x]`
3x	no modifier set	All icons can be found for preview at SVG Logos page online. No modifiers `iconify:logos:jupyter[3x]`

Table 6. Medical Icons
Size	Modifier	Markup	Render
3x	no modifier set	All icons can be found for preview at Medical Icons page online. No modifiers `iconify:medical-icon:i-ear-nose-throat[3x]`
5x	`md-red-900`	All icons can be found for preview at Medical Icons page online. Color (md) red `iconify:medical-icon:i-ear-nose-throat[5x md-red-900]`

What next

We hope you enjoyed seeing what icons can do. With MDI, FA, and Iconify together, you have access to tens of thousands of icons — something for almost every topic.

The J1 Template adds a number of AsciiDoc extensions that make writing pages easier. With these extensions you can place icons, lightboxes, sliders, and galleries on a page using simple AsciiDoc markup — no need for raw HTML. The result is less code to write and more readable pages.

Want to see them all? Continue with Asciidoc Extensions.