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

Shortcode Usage

Use the shortcode to add icons in your content.

Basic Usage

Using the default Tabler icon set

[svg-icon=star /]

With Explicit Icon Name

Heart icon

[svg-icon icon="heart" /]

Specifying Icon Set

GitHub brand icon

[svg-icon icon="github" set="brands" /]

With Custom Classes

Use Tailwind classes to control size and color:

Large primary colored icon

[svg-icon icon="rocket" class="w-8 h-8 text-primary" /]

Different Sizes

Small (16px) Medium (24px) Large (32px) Extra large (48px)

[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

[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

Twig Function

For use in templates, use the svg_icon() function:

{{ 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:

• Tabler Icons
• Hero Icons
• Bootstrap Icons
• Simple Icons (Brands)
• Lucide Icons
• Iconsax