Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.
Thank you for purchasing our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you have any issues, please contact the Support Help Desk at https://support.spruko.com/.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much!
Azea - Django Admin Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊
Azea– Django is a Bootstrap Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Azea Django admin template is powered with HTML, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 150+ HTML Pages & 50+ Plugins more UI elements . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. This template using Bootstrap5 framework. This admin template is fully 100% Premium Admin Templates quality. This template designed for using HTML5,CSS3,Jquery. After Purchased this template you will get All HTML files,CSS, Scss and JS Files.
It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design admin template.
it is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices
Once you Purchase Azea – Django is a Bootstrap Admin & Dashboard template, you will be able to get free download of all future updates.
Step1: Please visite the Official Web Site of the Python python.org
Step2: Click on the Download Python button
Step3: Now your Python setup file has downloaded
Step4: Now Right click on the Python setup file and select Run as administrator click on Yes
Step5: Please click on the Check Box Add Python to PATH. And select Customize installation option
Step6: Click on Install for all users. And click on the Install button to install python on your system
Step7: To check whether Python is installed or not type python --version in your terminal or console
Step8: The pip package is automatically installed with your python installation
Step9: To check whether pip package is installed or not type pip --version in your terminal or console
NOTE: Please follow the official web site python.org to install on Linux/UNIX OS.
python -m venv env in your terminal or consoleenv\scripts\activateIf you know how to create Django project you can skip this step.
C:\Users\ADMIN01> and type pip install django to install Django globally.python -m django --version in your terminal or consoleC:\Users\ADMIN01\Desktop\django>.django-admin startproject projectname and hit enter to create Django project. Here projectname is nothing but your django project folder name that you want to keep as your project nameC:\Users\ADMIN01\Desktop\django\projectname> in your command prompt and type python manage.py startapp appnamepip install -r requirements.txtNOTE: If you have any further queries in installation please refer to the official website HERE
python manage.py runserver
├── app/
| ├── __pycache__/
| ├── migrations/
| ├── templates/
| | ├── components/
| | | ├── layouts/
| | | ├── base.html
| | | ├── custom-base.html
| | | ├── landingpagg-base.html
| | | └── switcher-base.html
| | └── 150+ HTML files
├── azea
├── static/
| └── assets/
├── db.sqlite3
├── gulpfile.js
├── manage.py
├── package-lock.json
├── package.json
Azea comes with power of SCSS. The css files can be generated from scss by simply following below steps:
Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync ,optimizing images, etc... We are using gulp which allows to easily compilation of scss to csss. You can read it more about it here.
Please follow below steps to install and setup all prerequisites:
Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,
Make sure to have the Gulp installed &
running in your computer. If you have already installed gulp on your computer, you can skip
this step. In order to install, just run command npm install -g gulp from
your terminal.
After Completion of gulp Install. open gulpfile.js And install the "Declaration of gulp variables" in your command promt. In order to install, just run command npm install gulp, const sass = require('gulp-sass')(require('sass'));,
npm install gulp-postcss, npm install autoprefixer, npm install gulp-sourcemaps,
npm install browser-sync from your terminal.
Make sure to have all above prerequisites installed & running in your computer. If you want to install more variables for your template, just declare the variables in gulpfile.js after that run in command promt
To setup, follow below mentioned steps:
Make sure to have all above prerequisites installed & running in your computer
Open your terminal, go to your folder and enter the command npm install. This
would install all required dependencies in node_modules folder.
After you finished with above steps, you can run the command to compile scss into css:
gulp watch
| Command | Description |
|---|---|
gulp
|
Runs the project locally, starts the development server and watches for any changes in your code, including your html, javascript, sass, etc. The development server is accessible at http://localhost:3000. |
gulp watch
|
In this template gulp watch command is for what ever changes made in scss folder, will watch and run an appropriate task.
All the CSS files under assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
|
├── app/
| ├── __pycache__/
| ├── migrations/
| ├── templates/
| | ├── components/
| | | ├── layouts/
| | | | ├── landingpage
| | | | | ├── app-header.html
| | | | | ├── app-header1.html
| | | | | ├── app-sidebar.html
| | | | | ├── app-sidebar1.html
| | | | | ├── footer.html
| | | | | ├── scripts.html
| | | | | ├── styles.html
| | | | | └── switcher.html
| | | | ├── app-header.html
| | | | ├── app-header1.html
| | | | ├── app-sidebar.html
| | | | ├── custom-scripts.html
| | | | ├── custom-styles.html
| | | | ├── footer.html
| | | | ├── scripts.html
| | | | ├── styles.html
| | | | └── switcher.html
| | | ├── base.html
| | | ├── custom-base.html
| | | ├── landingpage-base.html
| | | └── switcher-base.html
| | └── 150+ HTML files
| ├── __init__.py
| ├── admin.py
| ├── apps.py
| ├── models.py
| ├── tests.py
| ├── urls.py
| └── views.py
├── azea/
| ├── __pycache__
| ├── __init__.py
| ├── asgi.py
| ├── settings.py
| ├── urls.py
| └── wsgi.py
├── static
| └── assets
| ├── css
| ├── iconfonts
| ├── images
| ├── js
| ├── plugins
| ├── scss
| └── switcher
├── db.sqlite3
├── gulpfile
├── manage.py
├── package-lock.json
└── package.json
If you want to add switcher to your template follow the below process.
Go to root path: app/templates/components/ open "base.html" in that file, below the body tag remove the Switcher Path as shown in below.
BEFORE :
AFTER :
Go to root path: app/templates/components/ open "base.html" file and remove Switcher Css as shown in below.
REMOVED SWITCHER CSS:
BEFORE :
<!-- Styles -->
{% include 'components/layouts/styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
<link href="{% static 'assets/switcher/css/switcher.css'%}" rel="stylesheet">
<link href="{% static 'assets/switcher/demo.css'%}" rel="stylesheet">
AFTER :
<!-- Styles -->
{% include 'components/layouts/styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
(removed switcher link)
Go to root path: app/templates/components/ open "base.html" file and remove switcher js as shown in below.
REMOVED SWITCHER SCRIPTS :
Before :
<!-- Switcher js -->
<script src="{% static 'assets/switcher/js/switcher.js'%}"></script>
Go to root path:
app/templates/components/ open
"base.html" file and then Change app-header1.html to
app-header.html as shown in below.
Before :
<!-- app header code -->
{% include 'components/layouts/app-header1.html' %}
<!-- End app header Code -->
After :
<!-- app header code -->
{% include 'components/layouts/app-header.html' %}
<!-- End app header Code -->
NOTE:The switcher is different for landing page, if you want to add switcher to the landing page then follow the process.(Skip this process if this is not your requirement).
Go to root path: app/templates/components/layouts/ open "landing-base.html" file and remove switcher js as shown in below.
Removed switcher js:
Before :
<!-- Switcher js -->
<script src="{% static 'assets/switcher/js/switcher.js'%}"></script>
Go to root path : app/templates/components/ open "landing-base.html" file and removed Switcher Css as shown in below.
REMOVED SWITCHER CSS:
BEFORE :
<!-- Styles -->
{% include 'components/layouts/landingpage/styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
<link href="{% static 'assets/switcher/css/switcher.css'%}" rel="stylesheet">
<link href="{% static 'assets/switcher/demo.css'%}" rel="stylesheet">
AFTER :
<!-- Styles -->
{% include 'components/layouts/landingpage/styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
(removed switcher link)
Go to root path:
app/templates/components/ open
"landing-base.html" file and then Change app-header1.html to
app-header.html as shown in below.
Before :
<!-- app header code -->
{% include 'components/layouts/landingpage/app-header1.html' %}
<!-- End app header Code -->
After :
<!-- app header code -->
{% include 'components/layouts/landingpage/app-header.html' %}
<!-- End app header Code -->
Go to root path:
app/templates/components/ open
"landing-base.html" file and then Change app-sidebar1.html to
app-sidebar.html as shown in below.
Before :
<!-- app sidebar Code -->
{% include 'components/layouts/landingpage/app-sidebar1.html' %}
<!-- End app sidebar Code -->
After :
<!-- app sidebar Code -->
{% include 'components/layouts/landingpage/app-sidebar.html' %}
<!-- End app sidebar Code -->
Go to root path: app/templates/components/ open "landing-base.html" in that file, below the body tag remove the Switcher Path as shown in below.
Removed custom switcher path
BEFORE :
AFTER :
{% block body %}{% endblock %}
(removed switcher Path)
NOTE: If you want to change your chart colors according to the theme colors, then follow the process.(Skip this process if this is not your requirement).
open a js file used for that particular HTML page and create a new function in that that js file as shown below
NOTE-1: Forindex.html page there is index.js file which is used for that particular page only. You should create function and place data for your chart in that index.js you should create new function and place chart data in that js files only
IMPORTANT:If you want to place a new chart in any other page Please create new js file and create the below function
function chartid() { -----------
--------
----------
}
Place your new chart data in the function which you created.
open themecolor.js Path:(static\assets\js\themecolor.js) and paste the below code in the names() function in (// chart colors) section located at the bottom of the file.
if(document.querySelector('#Your-chart-id') !== null){
example();
}
replace (#Your-chart-id) with your new chart id & replace example(); with chartid() function which you created in step 1.
place ( myVarVal ) variable before the colors of your chart where you want to change accordingly to the primary color of the template for example refer below code which we used in index.js file.
colors: [ myVarVal || "#38cab3","#e4e7ed"],
Go To _fonts.scss (static/assets/scss/custom/fonts/_fonts.scss )
if you want to change another font-family Go to the site Google Fonts And Slect One font Family and import In to style.css file
Example:

And paste Your Selected font-family in _fonts.scss
Example:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
And add the Your Selected font-family in _bootstrap-styles.scss(static/assets/scss/bootstrap/_bootstrap-styles.scss)
Example:
body {
margin: 0;
font-family: 'Nunito Sans', sans-serif !important;
font-size: .81rem;
text-align: start;
font-weight: 500;
background: $background;
overflow-x: hidden;
line-height: 1.5;
color: #495046;
}
Go To "static/assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for dark-mode to enable dark-theme style as shown in below
/*DARK THEME Start*/
// $('body').addClass('dark-mode');
/*Dark THEME End*/
dark-mode as shown below
/*DARK THEME Start*/
$('body').addClass('dark-mode');
/*Dark THEME End*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for color-header to enable color-header style as shown in below
/*--- Color Header Start --*/
// $('body').addClass('color-header');
/*--- Color Header End --*/
color-header as shown below
/*--- Color Header Start --*/
$('body').addClass('color-header');
/*--- Color Header End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for dark-header to enable dark-header style as shown in below
/*--- Dark Header Start --*/
// $('body').addClass('dark-header');
/*--- Dark Header End --*/
dark-header as shown below
/*--- Dark Header Start --*/
$('body').addClass('dark-header');
/*--- Dark Header End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for light-header to enable light-header style as shown in below
/*--- Light Header Start --*/
// $('body').addClass('light-header');
/*--- Light Header End --*/
light-header as shown below
/*--- Light Header Start --*/
$('body').addClass('light-header');
/*--- Light Header End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for gradient-header to enable gradient-header style as shown in below
/*--- Gradient Header Start --*/
// $('body').addClass('gradient-header');
/*--- Gradient Header End --*/
gradient-header as shown below
/*--- Gradient Header Start --*/
$('body').addClass('gradient-header');
/*--- Gradient Header End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for light-menu to enable light-menu style as shown in below
/*--- Light Menu Start --*/
// $('body').addClass('light-menu');
/*--- Light Menu End --*/
light-menu as shown below
/*--- Light Menu Start --*/
$('body').addClass('light-menu');
/*--- Light Menu End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for color-menu to enable color-menu style as shown in below
/*--- Color Menu Start --*/
// $('body').addClass('color-menu');
/*--- Color Menu End --*/
color-menu as shown below
/*--- Color Menu Start --*/
$('body').addClass('color-menu');
/*--- Color Menu End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js)file and remove comments for dark-menu to enable dark-menu style as shown in below
/*--- Dark Menu Start --*/
// $('body').addClass('dark-menu');
/*--- Dark Menu End --*/
dark-menu as shown below
/*--- Dark Menu Start --*/
$('body').addClass('dark-menu');
/*--- Dark Menu End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js)file and remove comments for gradient-menu to enable gradient-menu style as shown in below
/*--- Gradient Menu Start --*/
// $('body').addClass('gradient-menu');
/*--- Gradient Menu End --*/
gradient-menu as shown below
/*--- Gradient Menu Start --*/
$('body').addClass('gradient-menu');
/*--- Gradient Menu End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js)file and remove comments for layout-boxed to enable layout-boxed style as shown in below
/*--- Boxed Layout Start --*/
// $('body').addClass('layout-boxed');
/*--- Boxed Layout End --*/
layout-boxed as shown below
/*--- Boxed Layout Start --*/
$('body').addClass('layout-boxed');
/*--- Boxed Layout End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for scrollable-layout to enable scrollable-layout style as shown in below
/*--- Header-Position Styles Start --*/
// $('body').addClass('scrollable-layout');
/*--- Header-Position Styles End --*/
scrollable-layout as shown below
/*--- Header-Position Styles Start --*/
$('body').addClass('scrollable-layout');
/*--- Header-Position Styles End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for sidemenu-icontext to enable sidemenu-icontext style as shown in below
/**Icon-Text-Menu**/
// $('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
sidemenu-icontext as shown below
/**Icon-Text-Menu**/
$('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Closed Sidemenu to enable closed menu style as shown in below
/**closed-Menu**/
// $('body').addClass('closed-menu');
/**closed-Menu**/
Closed Sidemenu as shown below
/**closed-Menu**/
$('body').addClass('closed-menu');
/**closed-Menu**/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Icon Overlay Sidemenu to enable Icon Overlay style as shown in below
/**Icon-Overlay-Menu**/
// $('body').addClass('icon-overlay');
/**Icon-Overlay-Menu**/
sideicon-menu as shown below
/**Icon-Overlay-Menu**/
$('body').addClass('icon-overlay');
/**Icon-Overlay-Menu**/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Hover Submenu to enable Hover submenu style as shown in below
/**Hover-Sub-Menu**/
// $('body').addClass('hover-submenu');
/**Hover-Sub-Menu**/
Hover Submenu as shown below
/**Hover-Sub-Menu**/
$('body').addClass('hover-submenu');
/**Hover-Sub-Menu**/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Hover Submenu Style1 to enable Hover submenu style1 style as shown in below
/**Hover-Sub-Menu1**/
// $('body').addClass('hover-submenu1');
/**Hover-Sub-Menu1**/
Hover Submenu Style1 as shown below
/**Hover-Sub-Menu1**/
$('body').addClass('hover-submenu1');
/**Hover-Sub-Menu1**/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Double-menu to enable Double-menu style as shown in below
/**Double-Menu**/
// $('body').addClass('double-menu');
/**Double-Menu**/
Double-menu as shown below
/**Double-Menu**/
$('body').addClass('double-menu');
/**Double-Menu**/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Double-menu-tabs to enable Double-menu-tabs style as shown in below
/**Double-menu-tabs**/
// $('body').addClass('double-menu-tabs');
/**Double-menu-tabs**/
Double-menu-tabs as shown below
/**Double-menu-tabs**/
$('body').addClass('double-menu-tabs');
/**Double-menu-tabs**/
open swither-styles.js path:(static/assets/js/switcher-styles.js)file . and remove comments for $('body').addClass('rtl') to enable RTL version as shown in below
/*RTL Layout Style*/
// $('body').addClass('rtl');
/*RTL Layout Style End*/
$('body').addClass('rtl') as shown below
/*RTL Layout Style*/
$('body').addClass('rtl');
/*RTL Layout Style End*/
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for Horizontal Hover layout to enable Horizontal Hover layout style as shown in below
/* Horizontal Hover */
// $('body').addClass('horizontal-hover');
/* Horizontal Hover */
Horizontal Hover layout as shown below
/* Horizontal Hover */
$('body').addClass('horizontal-hover');
/* Horizontal Hover */
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and replacenoWrap with wrap in Horizontal (or) Horizontal Hover layout to enable wrap style for Horizantal or Horizantal Hover
document.querySelector('.horizontal .side-menu').style.flexWrap = 'nowrap'

noWrap with wrap as shown below
document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'
Example:

Simply you can change noWrap with wrapto change the style of Horizontal or Horizontal Hover Menus
open swither-styles.js path:(static/assets/js/switcher-styles.js) file and remove comments for centerlogo-horizontal to enable centerlogo-horizontal style as shown in below
/**Center-Logo**/
// $('body').addClass('center-logo');
/**Center-Logo**/
centerlogo-horizontal as shown below
/**Center-Logo**/
$('body').addClass('center-logo');
/**Center-Logo**/
open landing.js path:(static/assets/js/landing.js) file and remove comments for rtl to enable rtl style as shown in below
/*RTL Layout Style Start*/
// $('body').addClass('rtl');
/*RTL Layout Style End*/
rtl as shown below
/*RTL Layout Style Start*/
$('body').addClass('rtl');
/*RTL Layout Style End*/
open landing.js path:(static/assets/js/landing.js) file and remove comments for dark-mode to enable dark-mode style as shown in below
/*DARK THEME Start*/
// $('body').addClass('dark-mode');
/*Dark THEME End*/
dark-mode as shown below
/*DARK THEME Start*/
$('body').addClass('dark-mode');
/*Dark THEME End*/
Open themeColors.js file
static/assets/js/themeColors.js
To clear LocalStorage loading functions you need to remove localStorageBackup() function in themeColors.js as shown below
function localStorageBackup() {
}
To remove complete LocalStorage saving you need to remove all localstorage related calling functions in themeColors.js static/assets/js/themeColors.js and custom.js static/assets/js/switcher-styles.js files.
LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out.
localStorage.setItem('azealightMode', true);
localStorage.removeItem("azeasidebarMini");
localStorage.getItem("azeaprimaryColor")
To clear LocalStorage loading functions you need to remove landingPageLocalstorage() function in landing.jsstatic/assets/js/landing.js as shown below
function landingPageLocalstorage() {
}
Also You need to remove localstorage related calling functions localStorage.removeItem,localStorage.setItem in landing.js static/assets/js/landing.jsfile.
To change Primary Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.scss )
Note : After Changing color you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
To change Dark Theme Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.scss )
Note : After Changing color you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
To change Dark Body Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.scss )
Note : After Changing color you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
| Plugin | Version | URL |
|---|---|---|
| Bootstrap | v5.2.3 | https://getbootstrap.com/ |
| JQuery | v3.6.0 | https://jquery.com/ |
| Chartjs | v3.9.1 | https://www.chartjs.org/ |
| Flot Charts | v0.8.3 | https://www.flotcharts.org/plugins/ |
| Perfect-scrollbar | v1.4.0 | https://github.com/mdbootstrap/perfect-scrollbar |
| Datatables | v5.0 | https://datatables.net/ |
| Datepicker | v1.8.0 | https://jqueryui.com/datepicker/ |
| Fullcalendar | v5.11.3 | https://fullcalendar.io/ |
| ion.rangeSlider | v2.3.1 | http://ionden.com/a/plugins/ion.rangeSlider/index.html |
| jquery-countdown | v2.1.0 | http://keith-wood.name/countdown.html |
| jquery-inputmask | v1.14.13 | https://github.com/igorescobar/jQuery-Mask-Plugin/ |
| Sweet-alert | v1.0.1 | https://lipis.github.io/bootstrap-sweetalert/ |
| morris | v0.5.0 | http://morrisjs.github.io/morris.js/ |
| jquery-star-rating | v1.2.0 | https://github.com/nashio/star-rating-svg |
| select2 | v4.0.5 | https://select2.org/ |
| Rich Text Editor | https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/ | |
| Summernote Editor | https://summernote.org/ |
Refer following links for usage:
| Icons | References |
|---|---|
| Font Awesome | https://fontawesome.com/v4.7.0/icons/ |
| Material Design Icons | https://materialdesignicons.com/ |
| Simple Line Icons | https://simplelineicons.github.io/ |
| Feather Icons | https://feathericons.com/ |
| Ionic Icons | https://ionicons.com/ |
| Pe7 Icons | https://themes-pixeden.com/font-demos/7-stroke/ |
| Themify Icons | https://themify.me/themify-icons |
| Typicons Icons | https://iconify.design/icon-sets/typcn/ |
| Weather Icons | https://erikflowers.github.io/weather-icons/ |
| Bootstrap Icons | https://icons.getbootstrap.com/ |