Icons from web
Instalation
-
Via NPM
$ npm install @adereksisusanto/icons
-
Via Composer
$ composer require adereksisusanto/icons
Use
<!-- Online -->
<!-- All Icons -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/all.icons.min.css"
/>
<!-- Local -->
<!-- All Icons -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/all.icons.min.css"
/>Fonts
| Package | Version | Docs |
|---|---|---|
| Bootstrap Icons | 1.4.0 | Read Docs |
| Crypto Icons | 1.0.65 | Read Docs |
| Feather Icons | 4.28.0 | Read Docs |
| Flag Icons | 3.5.0 | Read Docs |
| Fontawesome Free [Updated] | 5.15.3 | Read Docs |
| Ion Icons [Updated] | 5.5.1 | Read Docs |
| Line Awesome [New] | 1.3.0 | Read Docs |
| Material Design Icons | 5.9.55 | Read Docs |
| Material Icons | 0.5.4 | Read Docs |
| Simple Line Icons | 2.5.5 | Read Docs |
| Themify Icons | 1.0.1-alpha.3 | Read Docs |
| Weather Icons | 1.3.2 | Read Docs |
Bootstrap Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/bootstrap.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/bootstrap.icons.min.css"
/>
<!-- Use -->
<i class="bi bi-alarm-fill"></i>Crypto Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/crypto.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/crypto.icons.min.css"
/>
<!-- Use -->
<i class="ci ci-byts"></i>Feather Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/feather.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/feather.icons.min.css"
/>
<!-- Use -->
<i class="feather feather-activity"></i>Flag Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/feather.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/feather.icons.min.css"
/>
<!-- Use -->
<i class="flag-icon flag-icon-id"></i>
<i class="flag-icon flag-icon-id flag-icon-squared"></i>Fontawesome Free
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/fontawesome.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/fontawesome.icons.min.css"
/>
<!-- Use -->
<i class="fab fa-500px"></i>Ion Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/ion.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/ion.icons.min.css"
/>
<!-- Use -->
<i class="ionicons ionicons-accessibility"></i>Line Awesome
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/lineawesome.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/lineawesome.icons.min.css"
/>
<!-- Use -->
<i class="las la-battery-three-quarters"></i>Material Design Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/material-design.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/material-design.icons.min.css"
/>
<!-- Use -->
<i class="mdi mdi-ab-testing"></i>Material Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/material.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/material.icons.min.css"
/>
<!-- Use -->
To display an icon, use:
<span class="material-icons">home</span>
To display outlined, round, sharp and two tone icons, use:
<span class="material-icons-outlined">home</span>
<span class="material-icons-round">home</span>
<span class="material-icons-sharp">home</span>
<span class="material-icons-two-tone">home</span>Simple Line Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/simple-line.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/simple-line.icons.min.css"
/>
<!-- Use -->
<i class="sli-user"></i>Themify Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/themify.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/themify.icons.min.css"
/>
<!-- Use -->
<i class="ti ti-arrow-up"></i>Weather Icons
<!-- Online -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@adereksisusanto/icons@1.0.6/dist/css/weather.icons.min.css"
/>
<!-- Local -->
<link
rel="stylesheet"
href="node_modules/@adereksisusanto/icons/dist/css/weather.icons.min.css"
/>
<!-- Use -->
<i class="wi wi-day-cloudy-gusts"></i>