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")

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")

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

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

Example

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

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