Search Icon
Settings Icon
User Icon
Check Icon
razor
<FodIcon Icon="IconName.Search"/>
<FodIcon Icon="IconName.Settings"/>
<FodIcon Icon="IconName.Person"/>
<FodIcon Icon="IconName.CheckmarkLarge"/>Icons
FOD Design System icons rendered via the FodIcon component. Icons support sizing, coloring, transformations, and accessibility modes.
Quick Start
Basic FodIcon usage with different icons.
Icon Sizes
Icons support semantic sizes (ExtraSmall, Small, Medium, Large) for consistency or custom pixel sizes via SizePixels.
Extra Small (12px)
Small (16px)
Medium (20px)
Default (24px)
Large (32px)
Custom (48px)
razor
<FodIcon Icon="IconName.Search" Size="IconSize.ExtraSmall"/>
<FodIcon Icon="IconName.Search" Size="IconSize.Small"/>
<FodIcon Icon="IconName.Search" Size="IconSize.Medium"/>
<FodIcon Icon="IconName.Search"/>
<FodIcon Icon="IconName.Search" Size="IconSize.Large"/>
<FodIcon Icon="IconName.Search" SizePixels="48"/>Icon Colors
Semantic color tokens automatically adapt to light/dark themes. Custom colors can be set using ColorValue parameter.
Inherit (Default)
Base
Secondary
Brand
Positive
Warning
Danger
Disabled
Custom (#9c27b0)
razor
<FodIcon Icon="IconName.CircleInfo" Color="IconColor.Base"/>
<FodIcon Icon="IconName.CircleInfo" Color="IconColor.Brand"/>
<FodIcon Icon="IconName.CheckmarkLarge" Color="IconColor.Positive"/>
<FodIcon Icon="IconName.CircleError" Color="IconColor.Danger"/>
<FodIcon Icon="IconName.CircleInfo" ColorValue="#9c27b0"/>Transformations
Icons can be rotated (90, 180, 270 degrees) and flipped (horizontal, vertical, both) without custom CSS.
Rotation
0 degrees
90 degrees
180 degrees
270 degrees
Flip
None
Horizontal
Vertical
Both
razor
<FodIcon Icon="IconName.ArrowUp" Rotation="IconRotation.Rotate90"/>
<FodIcon Icon="IconName.ArrowUp" Rotation="IconRotation.Rotate180"/>
<FodIcon Icon="IconName.ChevronRight" Flip="IconFlip.Horizontal"/>
<FodIcon Icon="IconName.ChevronRight" Flip="IconFlip.Both"/>Button Integration
Icons automatically resize and align when used inside buttons via IconStart and IconEnd RenderFragments.
Leading Icon
Trailing Icon
Both Icons
Icon Only
razor
<FodButton Type="FodColor.Primary">
<IconStart>
<FodIcon Icon="IconName.Search"/>
</IconStart>
<ChildContent>Search</ChildContent>
</FodButton>
<FodButton aria-label="Settings">
<IconStart>
<FodIcon Icon="IconName.Settings" Label="Settings"/>
</IconStart>
</FodButton>Accessibility
Decorative icons are hidden from screen readers. Semantic icons require a Label parameter for accessibility.
Decorative (Default)
Hidden from screen readers (aria-hidden)
Semantic with Label
Announced as "Success" by screen readers
razor
@* Decorative - hidden from screen readers *@
<div style="display: flex; align-items: center; gap: 8px;">
<FodIcon Icon="IconName.CircleInfo" Color="IconColor.Brand"/>
<span>Information text</span>
</div>
@* Semantic - requires Label for accessibility *@
<FodIcon Icon="IconName.CheckmarkLarge"
Color="IconColor.Positive"
Label="Success"/>Icons Gallery
Search and filter through all available icons. Total: 173 icons.
Navigation (15)
Actions (28)
Status (15)
Communication (10)
Documents (21)
Business (13)
People (11)
Calendar (13)
Location (4)
Security (10)
Home (5)
Social (4)
UI (11)
Miscellaneous (13)
API Reference
FodIcon component properties and their descriptions.
No properties defined.