RSL Icons - API Reference

1 Include the Files

Add the CSS and ensure the SVG sprite is accessible:

<!-- Include the icon CSS -->
<link rel="stylesheet" href="styles/rsl-icons.css">

<!-- SVG sprite file should be in images/rsl-icons.svg -->

2 Basic Usage

Use SVG with the <use> element to reference icons from the sprite:

<!-- Basic icon -->
<svg class="rsl-icon" aria-hidden="true">
    <use href="images/rsl-icons.svg#rsl-icon-check"></use>
</svg>

<!-- Icon with accessible label -->
<svg class="rsl-icon" role="img" aria-label="Settings">
    <use href="images/rsl-icons.svg#rsl-icon-cog"></use>
</svg>

Accessibility Tip: Use aria-hidden="true" for decorative icons. For icons that convey meaning, use role="img" and aria-label.

Size Variants

Icons scale with font size by default. Use size modifier classes for specific sizes:

xs

sm

default

lg

xl

2x

3x

4x

5x

Class	Size	Pixels (at 16px base)
`.rsl-icon-xs`	0.75em	12px
`.rsl-icon-sm`	0.875em	14px
`.rsl-icon` (default)	1em	16px
`.rsl-icon-lg`	1.25em	20px
`.rsl-icon-xl`	1.5em	24px
`.rsl-icon-2x`	2em	32px
`.rsl-icon-3x`	3em	48px
`.rsl-icon-4x`	4em	64px
`.rsl-icon-5x`	5em	80px

Color Variants

Icons inherit currentColor by default. Use color classes for semantic colors:

Class	Color	Use Case
`.rsl-icon-primary`	Blue (#007bff)	Primary actions, links
`.rsl-icon-secondary`	Gray (#6c757d)	Secondary information
`.rsl-icon-success`	Green (#28a745)	Success states, confirmations
`.rsl-icon-danger`	Red (#dc3545)	Errors, destructive actions
`.rsl-icon-warning`	Yellow (#ffc107)	Warnings, cautions
`.rsl-icon-info`	Cyan (#17a2b8)	Information, tips
`.rsl-icon-muted`	Gray (65% opacity)	Disabled, low priority

Animations

Add animation classes for loading states and attention-grabbing effects:

spin

pulse

bounce

shake

<!-- Spinning loader -->
<svg class="rsl-icon rsl-icon-spin">
    <use href="images/rsl-icons.svg#rsl-icon-spinner"></use>
</svg>

<!-- Pulsing heart -->
<svg class="rsl-icon rsl-icon-pulse">
    <use href="images/rsl-icons.svg#rsl-icon-heart"></use>
</svg>

<!-- Bouncing notification -->
<svg class="rsl-icon rsl-icon-bounce">
    <use href="images/rsl-icons.svg#rsl-icon-bell"></use>
</svg>

<!-- Shaking warning -->
<svg class="rsl-icon rsl-icon-shake">
    <use href="images/rsl-icons.svg#rsl-icon-exclamation-triangle"></use>
</svg>

Accessibility: Animations are automatically disabled when the user has prefers-reduced-motion: reduce enabled in their system settings.

Rotation & Flip

Transform icons with rotation and flip classes:

|

Class	Transformation
`.rsl-icon-rotate-90`	Rotate 90 degrees clockwise
`.rsl-icon-rotate-180`	Rotate 180 degrees
`.rsl-icon-rotate-270`	Rotate 270 degrees clockwise
`.rsl-icon-flip-horizontal`	Flip horizontally (mirror)
`.rsl-icon-flip-vertical`	Flip vertically
`.rsl-icon-flip-both`	Flip both directions

Button Integration

Icons work seamlessly with RSL buttons:

<!-- Icon before text (automatic margin) -->
<button class="btn btn-primary">
    <svg class="rsl-icon"><use href="images/rsl-icons.svg#rsl-icon-save"></use></svg>
    Save Changes
</button>

<!-- Icon after text -->
<button class="btn btn-default">
    Settings
    <svg class="rsl-icon rsl-icon-right"><use href="images/rsl-icons.svg#rsl-icon-cog"></use></svg>
</button>

<!-- Icon-only button -->
<button class="btn btn-primary">
    <svg class="rsl-icon"><use href="images/rsl-icons.svg#rsl-icon-spinner"></use></svg>
</button>

Brand Icons (SimpleIcons)

For brand icons, RSL uses the SimpleIcons CDN (3,300+ brand icons, CC0 license):

<!-- Brand icon (color from brand guidelines) -->
<img class="rsl-brand-icon" src="https://cdn.simpleicons.org/github" alt="GitHub">

<!-- Custom color -->
<img class="rsl-brand-icon" src="https://cdn.simpleicons.org/github/6E7BFF" alt="GitHub">

<!-- Size variants -->
<img class="rsl-brand-icon rsl-brand-icon-lg" src="https://cdn.simpleicons.org/twitter" alt="Twitter">
<img class="rsl-brand-icon rsl-brand-icon-2x" src="https://cdn.simpleicons.org/facebook" alt="Facebook">

Custom Colors: Add a color hex code after the icon name: https://cdn.simpleicons.org/github/FF5733

Utility Classes

Class	Effect	Use Case
`.rsl-icon-fw`	Fixed width (1.25em)	Icon lists, menus
`.rsl-icon-inline`	Baseline alignment	Inline with text baseline
`.rsl-icon-middle`	Middle alignment	Vertical centering
`.rsl-icon-border`	Border around icon	Emphasis, badges
`.rsl-icon-rounded`	Circular background	Avatar-style icons
`.rsl-icon-filled`	Filled instead of stroked	Solid icons

Sample Icons

RSL includes 300+ UI icons. Here's a sample - see examples page for the complete gallery:

home

user

cog

search

bell

envelope

calendar

clock

heart

star

check

times

plus

minus

edit

trash

download

upload

share

link

View All 300+ Icons

Migration from FontAwesome

RSL provides a migration script to automatically convert FontAwesome icons to RSL icons:

# Preview changes (dry run)
node scripts/migrate-icons.js --dry-run "src/**/*.html"

# Apply changes
node scripts/migrate-icons.js "src/**/*.html"

# Verbose output
node scripts/migrate-icons.js --verbose "src/**/*.html"

Before & After

FontAwesome (Before)

<i class="fas fa-check"></i>
<i class="fa fa-spinner fa-spin"></i>
<i class="fab fa-github"></i>

RSL Icons (After)

<svg class="rsl-icon" aria-hidden="true"><use href="images/rsl-icons.svg#rsl-icon-check"></use></svg>
<svg class="rsl-icon rsl-icon-spin" aria-hidden="true"><use href="images/rsl-icons.svg#rsl-icon-spinner"></use></svg>
<img class="rsl-brand-icon" src="https://cdn.simpleicons.org/github" alt="GitHub">

Zero Dependencies: After migration, you can remove the FontAwesome CDN script from your HTML.