Libx Sample Documentation

Icon Component Examples

Use the Icon component to display visual cues throughout your documentation.

Basic Usage

Simple example:

Icon Sizes

Specify sizes with any CSS unit:

Pixel values work as well:

Icon Colors

Customize colors to match your design:

Available Icons

Information & Status Icons

info
triangle-alert
circle-alert
circle-check
arrow-left
arrow-right
arrow-up
arrow-down

Utility Icons

search
settings
download
external-link

Practical Examples

Status Messages

Use icons in different message types:

This is an informational message.
This is a warning message.
This is an error message.
This is a success message.

List Items

Improve scannability with list icons:

  • Completed task

  • Confirmed configuration

  • Item requiring attention

Technical Details

Props

PropTypeDefaultDescription
namestring—Icon name to display (required)
sizestring"1em"Icon size (any CSS unit)
colorstring"currentColor"Icon color (CSS color value)
classNamestring—Additional CSS classes
styleobject—Inline styles

Using Icons in MDX

---
title: "My Document"
---

import { Icon } from '@docs/ui';

# Document

<Icon name="info" /> Important information goes here.

## Steps

1. <Icon name="circle-check" color="green" /> First step
2. <Icon name="circle-check" color="green" /> Second step
3. <Icon name="triangle-alert" color="orange" /> Watch out

See <Icon name="external-link" /> [official documentation](https://example.com) for details.

Accessibility

Icon components include accessibility features:

  • ARIA labels: Provide accessible names automatically
  • Decorative mode: Marks purely decorative icons appropriately
  • Screen reader guidance: Encourage pairing icons with descriptive text

For important icons, pair with context:

<Icon name="triangle-alert" />
<span className="sr-only">Warning:</span>
This action cannot be undone.

Customization

CSS Styling

Create custom styles:

.custom-icon {
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
  transition: transform 0.2s ease;
}

.custom-icon:hover {
  transform: scale(1.1);
}
<Icon name="settings" className="custom-icon" />

Theme Integration

Use CSS custom properties for theme colors:

:root {
  --icon-color-primary: #007bff;
  --icon-color-success: #28a745;
  --icon-color-warning: #ffc107;
  --icon-color-danger: #dc3545;
}
<Icon name="info" color="var(--icon-color-primary)" />

Next Steps

After mastering icons: