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.
Screenshot - icons location
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/
Compiling SCSS files
Overview
Gulp file (gulpfile.js) includes a separate task for compiling icon sets, which is called gulp icons. First of all you need to look at iconset variable, which is also responsible for generated CSS paths. If you change variable to some other name, your CSS files will be automatically added to a folder with the same name. This is how it works. Just make sure you are using correct icon set name.
Icons have 4 global variables defined in /assets/scss/_config.scss file: $icon-font-family, $icon-font-size, $icon-font-size-sm and $icon-font-size-lg. These 4 variables are also available as global CSS variables, meaning you can change font family or icon size directly there. Font family variable is very important one since it needs to match font family that is set in SCSS sources. Font size is less important, but still important - you can change it to whatever you want, but this change also requires some adjustments in other SCSS files where needed.
//** Icon sets: 'Phosphor', 'icomoon', 'material-icons', 'Font Awesome 5 Free'
$icon-font-family: 'Phosphor' !default;
$icon-font-size: 1.25rem !default;
$icon-font-size-lg: $icon-font-size * 1.2 !default;
$icon-font-size-sm: $icon-font-size * .8 !default;
SCSS files
Each icon set includes 5 SCSS files:
_base.scss- basic styles for icon classes_icons.scss- all icons_mixins.scss- set of mixins_variables.scss- core icon variables/compile/styles.scss- imports all other files. This is the file you need to compile. If you change the name, gulp will change generated CSS name accordingly.
Gulp task
For those who are familiar with Gulp, explanation is not necessary as it's very simple task. For other users here it is:
// Variable
iconset = 'phosphor'; // 'phosphor' (default), 'icomoon' 'fontawesome', 'material'
// Task
function icons() {
return src('../../assets/scss/shared/icons/' + iconset + '/compile/*.scss')
.pipe(compileSass().on('error', compileSass.logError))
.pipe(postcss(processors))
.pipe(minifyCss({
level: {1: {specialComments: 0}}
}))
.pipe(rename({
suffix: ".min"
}))
.pipe(dest('../../assets/icons/' + iconset));
}
- First things first - grab SCSS files from icons location. All variables correspond to folder names where SCSS files are, so by setting e.g.
'material'gulp will look for all files with .scss extension in'assets/scss/shared/icons/material/compile/*.scss'. That is why using correct values is important. minifyCsstask compresses generated CSS and removes all commentsrenamesays for itself - it adds.minsuffix to generated CSS- And then saves
styles.min.cssfile in/assets/icons/[icon set name]/folder. Here logic is the same -iconsetvariable is basically folder name that contains generated CSS.