Icons
The Helios theme includes access to over 30,000 SVG icons through the svg-icons plugin. Icons can be used in content via shortcodes or in templates via Twig functions.
Available Icon Sets
| Set | Icons | Description |
|---|---|---|
tabler |
5,736 | Default set - clean, consistent icons |
heroicons/outline |
324 | Outline style icons |
heroicons/solid |
324 | Solid style icons |
bootstrap |
2,059 | Bootstrap icon set |
brands |
3,256 | Popular brand logos |
lucide |
1,704 | Fork of Feather icons |
iconsax/outline |
1,792 | Outline variant |
iconsax/bold |
1,792 | Bold variant |
social |
6 | Social networking icons |
Shortcode Usage
Use the shortcode to add icons in your content.
Basic Usage
Using the default Tabler icon set
MARKDOWN
[svg-icon=star /]
With Explicit Icon Name
Heart icon
MARKDOWN
[svg-icon icon="heart" /]
Specifying Icon Set
GitHub brand icon
MARKDOWN
[svg-icon icon="github" set="brands" /]
With Custom Classes
Use Tailwind classes to control size and color:
Large primary colored icon
MARKDOWN
[svg-icon icon="rocket" class="w-8 h-8 text-primary" /]
Different Sizes
Small (16px) Medium (24px) Large (32px) Extra large (48px)
MARKDOWN
[svg-icon icon="settings" class="w-4 h-4" /] <!-- 16px -->
[svg-icon icon="settings" class="w-6 h-6" /] <!-- 24px -->
[svg-icon icon="settings" class="w-8 h-8" /] <!-- 32px -->
[svg-icon icon="settings" class="w-12 h-12" /] <!-- 48px -->
Colors
Success Warning Error Info
MARKDOWN
[svg-icon icon="circle-check" class="w-6 h-6 text-green-500" /]
[svg-icon icon="alert-triangle" class="w-6 h-6 text-amber-500" /]
[svg-icon icon="circle-x" class="w-6 h-6 text-red-500" /]
[svg-icon icon="info-circle" class="w-6 h-6 text-blue-500" /]
Icon Set Examples
Tabler Icons (Default)
Hero Icons
Brand Icons
Parameters
| Parameter | Required | Default | Description |
|---|---|---|---|
icon |
Yes | — | Icon name (without extension) |
set |
No | tabler |
Icon set to use |
class |
No | — | CSS classes for sizing and color |
Twig Function
For use in templates, use the svg_icon() function:
TWIG
{{ svg_icon('tabler/star', 'w-6 h-6 text-primary')|raw }}
{{ svg_icon('heroicons/solid/check-circle', 'w-5 h-5 text-green-500')|raw }}
{{ svg_icon('brands/github', 'w-8 h-8')|raw }}
Note
The |raw filter is required to output the SVG HTML correctly.
Finding Icons
Browse the icon sets online: