On the use of icons

August 1, 2022

A very quick guide.

The icons used in this theme are partly custom-made, and partly come from the Iconoir library. More can be downloaded from the Iconoir website as svg files and saved in _includes/svg for use in your website.

Here’s an overview of icons that already ship with the theme.

Category	Icons
Navigation
Actions
Communication
Maps
Social
Git
Security
Users
CV
Academic
Chess

They can be used in two ways through Liquid tags. First, as simple glyphs for decorative purposes, as in the table above or in the contact section of the CV:

{% include svg/github.svg %}

Second, as links:

{% include iconlink.html icon="svg/github.svg" href="https://github.com/" %}

In this case, the icon shows up with link formatting and its stroke width slightly increases on hovering. Here is an example:

Simple CSS allows you to modify many aspects of the icon’s appearance, including stroke width, color (with the stroke property), and size (with transform). Here is a usage example:

svg {
  /* 250% of its original size */
  transform: scale(2.5);
  }
svg path {
    /* red color */
    stroke: red;
    /* thinner line */
    stroke-width: 1.25;
  }

Note

Each icon available from Iconoir is essentially a text file:

<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M16 22.027v-2.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7a5.44 5.44 0 00-1.5-3.75 5.07 5.07 0 00-.09-3.77s-1.18-.35-3.91 1.48a13.38 13.38 0 00-7 0c-2.73-1.83-3.91-1.48-3.91-1.48A5.07 5.07 0 005 5.797a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7a3.37 3.37 0 00-.94 2.58v2.87M9 20.027c-3 .973-5.5 0-7-3" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

The <?...?> tag at the beginning is useful for apps but not for a Jekyll website, and it can be deleted.