Axicons: 3,969 SVG Icons

Quick Start

Axicons is a modular icon system with 3,969 SVG icons across 5 variants. Load only what you need.

1. Installation

Include the Axicons JavaScript file in your HTML:

<!-- Load base icons (89KB, 450 icons) -->
<script src="path/to/axicons-base.js"></script>

<!-- Optional: Add other variants -->
<script src="path/to/axicons-thin-variants.js"></script>
<script src="path/to/axicons-color-variants.js"></script>

2. HTML Markup

Use the axicon render class with the data-name attribute:

<!-- Simple icon -->
<span class="axicon render" data-name="Check"></span>

<!-- With styling -->
<button>
    <span class="axicon render" data-name="Menu"></span>
</button>

<!-- Different variants -->
<span class="axicon render" data-name="Check"></span>           <!-- Base -->
<span class="axicon render" data-name="CheckThin"></span>       <!-- Thin -->
<span class="axicon render" data-name="CheckInverted"></span>   <!-- Inverted -->

3. Styling Icons

Icons inherit color from parent element. Use CSS to style:

/* Size */
.icon-large {
    font-size: 2rem;
}

/* Color */
.icon-primary {
    color: var(--a-color-primary);
}

/* In buttons */
button .axicon {
    margin-right: 0.5rem;
    vertical-align: middle;
}

4. JavaScript Rendering

Icons are automatically rendered when the page loads. If you add icons dynamically:

// Manually render icons after dynamic content
if (typeof window.renderAxicons === 'function') {
    window.renderAxicons();
}

5. Icon Naming Convention

6. Performance Best Practices

• Start Minimal: Load only axicons-base.js (89KB) initially
• Mix Variants: Add other variants only if needed (+170-440KB each)
• Lazy Load: Use AxiconsLoader to load variants on-demand
• Cache Busting: Icon bundles are versioned and can be cached indefinitely
• CSS Inheritance: Icons use currentColor by default for easy theming