Acorn Icons

Line style icons that are created exclusively for Acorn. They are included in the dom within i or span tag and converted to svg via javascript. They are divided into packages to provide smaller file size and ease of use. Initialization of the javascript can be found in the scripts.js file.

// acorn-icons.js file should be included before any icon pack.
// These are all available packages, any one that is not needed should be removed.
<script src="icon/acorn-icons.js"></script>
<script src="icon/acorn-icons-interface.js"></script>
<script src="icon/acorn-icons-commerce.js"></script>
<script src="icon/acorn-icons-learning.js"></script>
<script src="icon/acorn-icons-medical.js"></script>

// Below lines already called in scripts.js but it should be called again if any icon is included at runtime.
if (typeof AcornIcons !== 'undefined') {
  new AcornIcons().replace();
}

// Usage
<i data-acorn-icon="screen" class="text-primary"></i>

// Default values
<i 
data-acorn-icon="screen" 
data-acorn-size="20"
data-acorn-width="20" 
data-acorn-height="20" 
data-acorn-viewBox="0 0 20 20" 
data-fill="none" 
data-acorn-stroke="currentColor" 
data-acorn-stroke-width="1.5" 
data-acorn-stroke-linecap="round" 
data-acorn-stroke-linejoin="round"
></i>

You may find and search for icons in Acorn Interface Icons , Acorn Commerce Icons , Acorn Learning Icons , Acorn Medical Icons pages.