Icon sets
Overview
Limitless includes 4 icon sets: Phosphor, Icomoon, Fontawesome and Material Design. Default icon set in Limitless 4.0 is Phosphor Regular, which includes 1000+ icons. Icomoon set, which was the default in previous versions is now optional.
Usage
Installation process is the same for all icon sets. All SCSS and CSS files have same names, the only difference is folder name that contains files. Installation process is the following:
- First of all you need to adjust path to font files in
_variables.scsslocated in/assets/scss/shared/icons/[icon set name]/folder. Open this file and change font path variables and/or change icon class prefix if necessary. This step is required only if you change file location. - Compile your SCSS files for icons. Generated CSS file is
located in
/assets/icons/[icon set name]/folder. This path can be also changed in gulpfile.js - Include
styles.min.cssin your<head>section on your page - You are done!
<!-- Phosphor icon set -->
<link href="assets/icons/phosphor/styles.min.css" rel="stylesheet" type="text/css">
<!-- Icomoon icon set -->
<link href="assets/icons/icomoon/styles.min.css" rel="stylesheet" type="text/css">
<!-- Font Awesome icon set -->
<link href="assets/icons/fontawesome/styles.min.css" rel="stylesheet" type="text/css">
<!-- Material icon set -->
<link href="assets/icons/material/styles.min.css" rel="stylesheet" type="text/css">
Phosphor set
Phosphor icon set is the default set in
Limitless template. It's also available in 6 weights: thin,
light, regular, bold, fill and duotone. We are using Regular
weight as it fits best in the UI. Phosphor icon set includes
~1100 icons and is based on 16px grid, meaning you can use
4px step to make them look sharp. Default icon size is 20px.
Icon class names start with .ph- prefix.
SCSS files location:
/assets/scss/shared/icons/phosphor/
CSS files location:
/assets/icons/phosphor/
Icon set also includes selection.json file - you
can use it for editing current icon set in Icomoon app and
generating a new icon set. Just import it in the app,
select/unselect icons and generate a new font.
You can use Phosphor icons website to preview all set, export individual icons to SVG and search.
Icomoon set
Icomoon is a custom icon set based on Icomoon
Ultimate pack. By default it includes 1600+ icon, but this
number was reduced and current set contains 1145 icons, all
based on 16px grid. This means they look crisp and sharp in
16px (32px. 48px. 64px etc) size. Icon class names start
with .icon- prefix.
SCSS files location:
/assets/scss/shared/icons/icomoon/
CSS files location:
/assets/icons/icomoon/
selection.json file - you
can use it for editing current icon set in Icomoon app and
generating a new icon set. Just import it in the app,
select/unselect icons and generate a new font. Keep in mind that
icon classes should have icon-* prefix.
Font Awesome icons
Font Awesome set includes 1500+ icons from
version 5. This famous icon set also includes brand icons
and come in 2 styles: regular and solid. Font Awesome icons
are based on 14px grid and best font size for them is 14px
(28px, 42px, 58px etc). This library is in active
development and I'll be updating it on regular basis. Icon
class names start with .fa- prefix and have
additional class names: fab - brand icons,
far - outline icons, fas -
solid icons.
SCSS files location:
/assets/scss/shared/icons/fontawesome/
CSS files location: /assets/icons/fontawesome/
Material Design set
Material Design icon is a part of Material
design language created by Google a while ago. It includes
845 icons in a solid style. All icons are based on 24px
grid, but they also look great in 16px and 20px sizes. Icon
class names start with .mi- prefix.
SCSS files location:
/assets/scss/shared/icons/material/
/assets/icons/material/