Icons
A comprehensive collection of SVG icons for your Blazor applications. All icons are scalable, customizable, and accessible.
Overview
Marai.UI provides a curated set of SVG icons that you can use directly in your Blazor components. All icons are vector-based, which means they scale perfectly at any size and can be styled with CSS.
Benefits
- Scalable: Vector-based icons that look sharp at any size
- Customizable: Change color, size, and stroke width with simple attributes
- Accessible: Include proper ARIA attributes for screen readers
- Lightweight: SVG icons are embedded directly in your HTML, no extra requests
- Copy-Paste Ready: Click any icon to view and copy its SVG code
Basic Usage
Quick Start
Simply copy the SVG code and paste it into your Razor component:
Preview
Add Item
razor
<div style="display:flex;gap:1rem;align-items:center;">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" />
</svg>
<span>Add Item</span>
</div>Adjusting Icon Size
Change the width and height attributes to resize icons:
Preview
razor
<!-- Small Icon (16x16) -->
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
</svg>
<!-- Medium Icon (24x24) -->
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
</svg>
<!-- Large Icon (32x32) -->
<svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
</svg>
<!-- Extra Large Icon (48x48) -->
<svg width="48" height="48" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
</svg>Changing Icon Color
Use the stroke attribute or CSS to change icon colors:
Preview
razor
<!-- Using stroke attribute -->
<svg width="32" height="32" fill="none" stroke="#0d6efd" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
</svg>
<!-- Using CSS class -->
<svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true"
style="color: #198754;">
<circle cx="12" cy="12" r="10" />
</svg>
<!-- currentColor inherits from parent -->
<div style="color: #dc3545;">
<svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
</svg>
</div>Using Icons with Buttons
Icons work great inside button components:
Preview
razor
<MButton Variant="Variant.Primary">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true"
style="margin-right:0.5rem;">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" />
</svg>
Add Item
</MButton>
<MButton Variant="Variant.Destructive">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true"
style="margin-right:0.5rem;">
<polyline points="3 6 5 6 21 6"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
</svg>
Delete
</MButton>Accessibility
Always include proper ARIA attributes for screen reader users:
razor
<!-- Decorative icon (has adjacent text) -->
<button>
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" />
</svg>
Add Item
</button>
<!-- Standalone icon (no adjacent text) - Option 1: Using aria-label -->
<button aria-label="Add new item">
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" aria-hidden="true">
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" />
</svg>
</button>
<!-- Standalone icon - Option 2: Using role and title -->
<button>
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" viewBox="0 0 24 24" role="img">
<title>Add new item</title>
<circle cx="12" cy="12" r="10" />
<line x1="12" y1="8" x2="12" y2="16" />
<line x1="8" y1="12" x2="16" y2="12" />
</svg>
</button>Accessibility Guidelines
- Use
aria-hidden="true"for decorative icons that have adjacent text - Use
aria-labelorrole="img"+<title>for standalone icons - Ensure sufficient color contrast (WCAG AA: 3:1 for large icons, 4.5:1 for small icons)
- Don't rely on color alone to convey information
Icon Library
Ready to explore our complete icon collection? Visit the Icon Library page to browse, search, and copy icons.
Best Practices
Icon Usage Guidelines
- Consistency: Use the same icon size for similar actions throughout your app
- Clarity: Choose icons that clearly represent their action or meaning
- Color: Use color to reinforce meaning (e.g., red for delete, green for success)
- Context: Include text labels alongside icons for important actions
- Performance: SVG icons are lightweight, but avoid using hundreds on a single page
- Accessibility: Always provide alternative text for standalone icons