Skip to main content
The Icon component renders SVG icons with consistent sizing, coloring, and accessibility features.

​
Usage

Use the flx-icon component to display icons throughout your application. 
<flx-icon name="home"></flx-icon>

​
Selector

flx-icon

​
Properties

​
name
string
required
Name of the icon to display from the FlowX icon library. Must match an available icon name.
​
size
number | string
default:"16"
Size of the icon in pixels. Accepts both number values and string values with units.Common sizes:
  • 16: Small icons (default)
  • 20: Medium icons
  • 24: Large icons
  • 32: Extra large icons
​
color
string
Color of the icon. Accepts any valid CSS color value (hex, rgb, named colors).If not specified, the icon inherits the current text color.
​
rotate
number
Rotation angle in degrees. Useful for directional icons.
​
flip
'horizontal' | 'vertical' | 'both'
Flip the icon horizontally, vertically, or both.
​
aria-label
string
Accessible label for screen readers. Recommended when the icon conveys meaning without accompanying text.

​
Icon sizes

<div class="icon-sizes">
  <flx-icon name="star" size="16"></flx-icon>
  <flx-icon name="star" size="20"></flx-icon>
  <flx-icon name="star" size="24"></flx-icon>
  <flx-icon name="star" size="32"></flx-icon>
  <flx-icon name="star" size="48"></flx-icon>
</div>

​
Color variations

<!-- Using hex colors -->
<flx-icon name="heart" color="#ef4444"></flx-icon>

<!-- Using CSS color names -->
<flx-icon name="info" color="blue"></flx-icon>

<!-- Using RGB -->
<flx-icon name="check" color="rgb(34, 197, 94)"></flx-icon>

<!-- Inheriting text color -->
<span style="color: purple;">
  <flx-icon name="crown"></flx-icon>
</span>

​
Transformations

​
Rotation

<flx-icon name="arrow-up" rotate="0"></flx-icon>
<flx-icon name="arrow-up" rotate="90"></flx-icon>
<flx-icon name="arrow-up" rotate="180"></flx-icon>
<flx-icon name="arrow-up" rotate="270"></flx-icon>

​
Flipping

<flx-icon name="arrow-right"></flx-icon>
<flx-icon name="arrow-right" flip="horizontal"></flx-icon>
<flx-icon name="arrow-right" flip="vertical"></flx-icon>
<flx-icon name="arrow-right" flip="both"></flx-icon>

​
Common use cases

​
In buttons

<button flxButton icon="save">
  Save Changes
</button>

<button flxButton>
  <flx-icon name="download"></flx-icon>
  Export
</button>

​
In navigation

<nav>
  <a href="/dashboard">
    <flx-icon name="dashboard" size="20"></flx-icon>
    Dashboard
  </a>
  <a href="/settings">
    <flx-icon name="settings" size="20"></flx-icon>
    Settings
  </a>
  <a href="/profile">
    <flx-icon name="user" size="20"></flx-icon>
    Profile
  </a>
</nav>

​
Status indicators

<div class="status">
  <flx-icon name="check-circle" color="#10b981" size="20"></flx-icon>
  <span>Active</span>
</div>

<div class="status">
  <flx-icon name="x-circle" color="#ef4444" size="20"></flx-icon>
  <span>Inactive</span>
</div>

<div class="status">
  <flx-icon name="clock" color="#f59e0b" size="20"></flx-icon>
  <span>Pending</span>
</div>

​
Form inputs

<div class="input-group">
  <flx-icon name="search" color="#9ca3af"></flx-icon>
  <input type="text" placeholder="Search..." />
</div>

<div class="input-group">
  <flx-icon name="mail" color="#9ca3af"></flx-icon>
  <input type="email" placeholder="Email address" />
</div>

​
Icon showcase

import { Component } from '@angular/core';

@Component({
  selector: 'app-icon-showcase',
  template: `
    <div class="icon-grid">
      <div *ngFor="let icon of icons" class="icon-card">
        <flx-icon [name]="icon" size="32"></flx-icon>
        <span>{{ icon }}</span>
      </div>
    </div>
  `,
  styles: [`
    .icon-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 16px;
    }
    
    .icon-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      text-align: center;
    }
    
    .icon-card span {
      margin-top: 8px;
      font-size: 12px;
      color: #6b7280;
    }
  `]
})
export class IconShowcaseComponent {
  icons = [
    'home', 'settings', 'user', 'search', 'bell',
    'mail', 'calendar', 'check', 'x', 'plus',
    'minus', 'edit', 'delete', 'download', 'upload',
    'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right',
    'chevron-up', 'chevron-down', 'chevron-left', 'chevron-right',
    'star', 'heart', 'bookmark', 'share', 'link',
    'image', 'video', 'file', 'folder', 'document',
    'lock', 'unlock', 'eye', 'eye-off', 'info',
    'warning', 'error', 'success', 'help', 'question'
  ];
}

​
Dynamic icons

import { Component } from '@angular/core';

@Component({
  selector: 'app-dynamic-icon',
  template: `
    <div class="status-card">
      <flx-icon 
        [name]="statusIcon" 
        [color]="statusColor" 
        size="24">
      </flx-icon>
      <span>{{ statusText }}</span>
    </div>
  `
})
export class DynamicIconComponent {
  status: 'success' | 'error' | 'warning' | 'info' = 'success';
  
  get statusIcon(): string {
    const icons = {
      success: 'check-circle',
      error: 'x-circle',
      warning: 'alert-triangle',
      info: 'info-circle'
    };
    return icons[this.status];
  }
  
  get statusColor(): string {
    const colors = {
      success: '#10b981',
      error: '#ef4444',
      warning: '#f59e0b',
      info: '#3b82f6'
    };
    return colors[this.status];
  }
  
  get statusText(): string {
    const texts = {
      success: 'Operation successful',
      error: 'An error occurred',
      warning: 'Warning: Please review',
      info: 'Information available'
    };
    return texts[this.status];
  }
}

​
Accessibility

When icons are used without accompanying text, always provide an aria-label to ensure screen reader users understand their meaning.
<!-- Good: Icon with visible label -->
<button>
  <flx-icon name="save"></flx-icon>
  Save
</button>

<!-- Good: Icon-only with aria-label -->
<button aria-label="Save document">
  <flx-icon name="save"></flx-icon>
</button>

<!-- Bad: Icon-only without label -->
<button>
  <flx-icon name="save"></flx-icon>
</button>

​
Decorative icons

For purely decorative icons, use aria-hidden="true" to hide them from screen readers: 
<div class="card">
  <flx-icon name="sparkles" aria-hidden="true"></flx-icon>
  <h3>Premium Feature</h3>
  <p>Unlock advanced capabilities</p>
</div>

​
Best practices

Maintain consistent icon sizes within the same context (e.g., all navigation icons should be the same size).
  • Use semantic color choices that align with their meaning (green for success, red for errors)
  • Keep icon sizes proportional to surrounding text
  • Use icons to enhance, not replace, clear text labels
  • Test icon visibility across different backgrounds
  • Limit the number of different icon styles in a single interface

​
Performance

Icons are loaded as inline SVG elements, ensuring crisp rendering at any size without additional HTTP requests.
  • Icons are optimized for minimal file size
  • No external icon font downloads required
  • SVG format ensures sharp display on high-DPI screens
  • Icons can be easily animated with CSS

Build docs developers (and LLMs) love

Get started for freeTalk to us