{# Settings #} {% set root = "../../../" %} {% set sidebarNavActive_1 = "shortcode-base-icons" %} {% set title = "Icon Types" %} {% include "html/assets/include/nunjucks/partials/head.njk" %} {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %} {% include "html/assets/include/nunjucks/partials/core-css.njk" %} {% include "html/assets/include/nunjucks/partials/core-icons.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

Plain Icons

The plain icons style uses the .u-icon-v1 class.

Font Awesome Icons

Font Awesome gives you 675 Icons that can instantly be customized — size, color and anything that can be done with the power of CSS.

View all 675 icons

{% set contentTarget = "#shortcode1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons

Simple Line Icons gives you 189 Icons that can instantly be customized — size, color and anything that can be done with the power of CSS.

View all 189 icons

{% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons PRO

Simple Line Icons PRO gives you 2 810 Icons that can instantly be customized — size, color and anything that can be done with the power of CSS.

View all 2 810 icons:
– Part 1
– Part 2

{% set contentTarget = "#shortcode3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Elegant Themes 100 Line Icons

Elegant Themes 100 Line Icons gives you 100 Icons that can instantly be customized — size, color and anything that can be done with the power of CSS.

View all 100 icons

{% set contentTarget = "#shortcode4" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Bordered Icons

The bordered icons style uses the .u-icon-v2 class.

Font Awesome Icons

{% set contentTarget = "#shortcode5" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons

{% set contentTarget = "#shortcode6" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons PRO

{% set contentTarget = "#shortcode7" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Elegant Themes 100 Line Icons

{% set contentTarget = "#shortcode8" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Backgrounded Icons

The backgrounded icons style uses the .u-icon-v3 class.

Font Awesome Icons

{% set contentTarget = "#shortcode9" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons

{% set contentTarget = "#shortcode10" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons PRO

{% set contentTarget = "#shortcode11" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Elegant Themes 100 Line Icons

{% set contentTarget = "#shortcode12" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Backgrounded & Bordered Icons

The backgrounded & bordered icons style uses the .u-icon-v4 class and <span class="u-icon-v4-inner"> as a child element.

Font Awesome Icons

{% set contentTarget = "#shortcode13" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons

{% set contentTarget = "#shortcode14" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Simple Line Icons PRO

{% set contentTarget = "#shortcode15" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Elegant Themes 100 Line Icons

{% set contentTarget = "#shortcode16" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Rounded Icons

The rounded icons style uses the .g-rounded-* class.

Rounded Bordered Icons

{% set contentTarget = "#shortcode19" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode20" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode21" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Rounded Backgrounded Icons

{% set contentTarget = "#shortcode22" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode23" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode24" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Rounded Backgrounded & Bordered Icons

{% set contentTarget = "#shortcode25" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode26" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode27" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Rotated Icons

The rotated icons style uses the .u-icon-rotation class.

Rotated Bordered Icons

{% set contentTarget = "#shortcode28" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode29" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode30" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Rotated Backgrounded Icons

{% set contentTarget = "#shortcode31" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode32" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode33" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Rotated Backgrounded & Bordered Icons

{% set contentTarget = "#shortcode34" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode35" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% set contentTarget = "#shortcode36" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

WAIT! Animate

Plain Icons

{% set contentTarget = "#shortcode37" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Bordered Icons

{% set contentTarget = "#shortcode38" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %} {% include "html/assets/include/nunjucks/partials/core-js.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}