Icon

The Icon component provides easy access to Bootstrap Icons, the official icon library with 2,000+ high-quality SVG icons. Perfect for enhancing buttons, navigation, and UI elements.

Goal

Master using Bootstrap Icons in your Faststrap applications with simple, Pythonic syntax.

Bootstrap Icons

Browse all 2,000+ icons

---

Quick Start

from faststrap import Icon

# Basic icon
Icon("heart")

# Icon with color
Icon("heart-fill", cls="text-danger")

# Icon in button
Button(Icon("download"), " Download", variant="primary")

---

Finding the Right Icon Name

FastStrap uses the Bootstrap Icons naming convention directly. If an icon does not render, the most common cause is an incorrect icon name.

Helpful checks:

• browse the official library at icons.getbootstrap.com
• search by noun first (house, gear, person, search)
• try the -fill variant when you want a stronger filled shape
• prefer the exact Bootstrap Icons name rather than an alias such as checkmark or right-arrow

Examples:

Icon("check-circle")      # good
Icon("arrow-right")       # good
Icon("person-fill")       # good

Icon("checkmark")         # wrong
Icon("right-arrow")       # wrong

---

Common Use Cases

1. In Buttons

from faststrap import Button, Icon

Button(Icon("plus"), " Add New", variant="success")
Button(Icon("trash"), " Delete", variant="danger")
Button(Icon("pencil"), " Edit", variant="primary")

---

2. In Navigation

from faststrap import ListGroup, ListGroupItem, Icon

ListGroup(
    ListGroupItem(Icon("house"), " Home", href="/"),
    ListGroupItem(Icon("gear"), " Settings", href="/settings"),
    ListGroupItem(Icon("person"), " Profile", href="/profile")
)

---

3. Status Indicators

# Success
Icon("check-circle-fill", cls="text-success")

# Error
Icon("x-circle-fill", cls="text-danger")

# Warning
Icon("exclamation-triangle-fill", cls="text-warning")

# Info
Icon("info-circle-fill", cls="text-info")

---

4. Sizes

# Small
Icon("star", cls="fs-6")

# Medium (default)
Icon("star")

# Large
Icon("star", cls="fs-3")

# Extra Large
Icon("star", cls="fs-1")

---

Popular Icons

Icon Name	Use Case
house, house-fill	Home navigation
gear, gear-fill	Settings
person, person-fill	User profile
envelope, envelope-fill	Email/messages
heart, heart-fill	Favorites/likes
star, star-fill	Ratings
cart, cart-fill	Shopping cart
search	Search functionality
plus, plus-circle	Add/create
trash, trash-fill	Delete
pencil, pencil-fill	Edit
download	Download
upload	Upload
check, check-circle	Success/complete
x, x-circle	Close/error
arrow-left, arrow-right	Navigation
list	Menu
three-dots-vertical	More options

---

Naming Patterns

Bootstrap Icons often follow these suffix patterns:

• -fill for filled versions: heart-fill, star-fill
• -circle / -circle-fill for status-style icons: check-circle, x-circle-fill
• directional names such as arrow-left, arrow-right, chevron-down
• object nouns such as house, gear, person, envelope, cart

When in doubt, search the Bootstrap Icons catalog for the exact final name.

---

Parameter Reference

Parameter	Type	Description
name	str	Icon name from Bootstrap Icons (e.g., 'heart', 'star-fill')
**kwargs	Any	Additional attributes (cls, style, etc.)

Note: Icon names use the Bootstrap Icons naming convention. Visit icons.getbootstrap.com to browse all available icons.

faststrap.utils.icons.Icon(name, **kwargs)

Create a Bootstrap Icon.

Parameters:

Name	Type	Description	Default
name	str	Icon name from Bootstrap Icons (e.g., 'heart', 'star-fill')	required
**kwargs	Any	Additional attributes	{}

Returns:

Type	Description
I	I element with Bootstrap icon class

Examples:

>>> Icon("heart-fill", cls="text-danger")

Source code in src/faststrap/utils/icons.py

def Icon(name: str, **kwargs: Any) -> I:
    """Create a Bootstrap Icon.

    Args:
        name: Icon name from Bootstrap Icons (e.g., 'heart', 'star-fill')
        **kwargs: Additional attributes

    Returns:
        I element with Bootstrap icon class

    Examples:
        >>> Icon("heart-fill", cls="text-danger")
    """
    cls = kwargs.pop("cls", "")
    return I(cls=f"bi bi-{name} {cls}".strip(), **kwargs)