Documentation - Icons.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Icons
Marssel integrates a flexible SVG-based icon system with support for custom local icons, three styles (outline, solid, duotone) and easy resizing.
Basic Usage
Display an icon with icon-[name]:
<!-- Simple icon -->
<span class="icon-[acorn]"></span>
<!-- With size -->
<span class="icon-[acorn] icon-size-[large]"></span>
<!-- With color -->
<span class="icon-[acorn] icon-size-[xlarge] c-[2563eb]"></span>Sizes available
Use icon-size-[size] to set the size:
<!-- Small (16px) -->
<span class="icon-[star] icon-size-[small]"></span>
<!-- Medium (24px) - default -->
<span class="icon-[star] icon-size-[medium]"></span>
<!-- Large (32px) -->
<span class="icon-[star] icon-size-[large]"></span>
<!-- Extra large (48px) -->
<span class="icon-[star] icon-size-[xlarge]"></span>
<!-- Custom size -->
<span class="icon-[star] icon-size-[150px]"></span>Types of icons
Marssel supports three icon styles:
<!-- Outline (default) -->
<span class="icon-[acorn] icon-size-[medium]"></span>
<!-- Solid -->
<span class="icon-[acorn-solid] icon-size-[medium]"></span>
<!-- Duotone -->
<span class="icon-[acorn-duotone] icon-size-[medium]"></span>Colors
Apply colors with c-[color]:
<!-- Hexadecimal color -->
<span class="icon-[check] icon-size-[medium] c-[10b981]"></span>
<!-- Theme color -->
<span class="icon-[info] icon-size-[medium] c-[theme-peach]"></span>
<!-- Color on hover -->
<span class="icon-[heart] icon-size-[medium] c-[6b7280] c-[D41212]:hover"></span>
<!-- CurrentColor (inherits parent text color) -->
<div class="c-[2563eb]">
<span class="icon-[home] icon-size-[medium]"></span>
Welcome
</div>Custom Icons
Add your own SVG icons:
**File organization:**
public/
|----images/
|--------icons/
|------------outline/
|----------------my-icon.svg
|------------solid/
|----------------my-icon.svg
|------------duotone/
|----------------my-icon.svgGenerate icon manifest
After adding your custom icons, generate the manifest file:
# From the npm package (full command)
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs
# With personalized options
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs \
--icons public/images/icons \
--manifest public/js/icons-manifest.json \
--prettyOptions available:
- --icons : Path to the folder containing your SVG icons (default: public/images/icons/)
- --manifest : Manifest file output path (default: public/js/icons-manifest.json)
- --pretty : Format JSON in a readable way (recommended for development)
💡 Note : The generator automatically scans the outline/, solid/ and duotone/ subfolders and adds the appropriate suffixes to the icon names.
Using with custom paths
If you use custom paths, make sure to configure them in both the manifest generation AND the Marssel initialization:
# 1. Generate manifest with custom paths
node node_modules/@marssel-vb/marssel/generators/generate-icons-manifest.mjs \
--icons assets/svg/icons \
--manifest assets/data/icons.json \
--pretty// 2. Configure Marssel with the same paths
import { MarsselBundle } from '@marssel-vb/marssel';
const { Marssel } = MarsselBundle;
const app = new Marssel({
paths: {
iconsManifest: '/assets/data/icons.json'
}
});Using imported icons
<!-- Custom outline icon -->
<span class="icon-[my-icon] icon-size-[medium]"></span>
<!-- Solid custom icon -->
<span class="icon-[my-icon-solid] icon-size-[medium]"></span>
<!-- Custom duotone icon -->
<span class="icon-[my-icon-duotone] icon-size-[medium]"></span>Animated icons
Add animations to icons:
<!-- Rotation -->
<span class="icon-[spinner-ball-duotone] icon-size-[medium] c-[2563eb] icon-animated-[spin]"></span>
<!-- Pulse -->
<span class="icon-[circle-notch] icon-size-[medium] c-[2563eb] icon-animated-[pulse]"></span>Common Icons
Find all the icons available in the library Marssel Icons.
JavaScript API
Control icons programmatically:
// Check if manifest is loaded
if (marssel.iconManager.isLoaded) {
console.log('Loaded Icons');
}
// Get cache statistics
const stats = marssel.iconManager.getCacheStats();
console.log(stats);
// { size: 45, iconsLoaded: 120, isLoaded: true }
// Clear cache
marssel.iconManager.clearCache();