Skip to main content

​
Import

from reflex_ui import simple_icon

# or
from reflex_ui import SimpleIcon

​
Description

The SimpleIcon component is a wrapper for @icons-pack/react-simple-icons, providing access to thousands of popular brand icons including social media platforms, programming languages, frameworks, and more.

​
Library

​
Usage

from reflex_ui import simple_icon

# Basic usage
simple_icon("SiReact")

# With custom color and size
simple_icon(
    "SiGithub",
    color="#181717",
    size=32
)

# With string size
simple_icon(
    "SiPython",
    size="2em",
    color="#3776AB"
)

​
Props

​
icon_name
str
required
The icon component name from Simple Icons. This is the first positional argument to the create() method.Icon names follow the pattern Si{BrandName} (e.g., “SiReact”, “SiGithub”, “SiPython”).This prop sets the component’s tag, which determines which icon is imported from the library.
​
color
str
The color of the icon. Accepts any valid CSS color value:
  • Hex: "#FF0000"
  • RGB: "rgb(255, 0, 0)"
  • Named: "red"
  • CSS variables: "var(--accent-9)"
​
size
int | str
The size of the icon. Can be specified as:
  • Integer: pixel value (e.g., 24 for 24px)
  • String: any valid CSS size unit (e.g., "2em", "1.5rem", "24px")

​
Special Behavior

​
create() Method

The SimpleIcon.create() method (also available as simple_icon()) requires the icon name as the first positional argument: 
# Basic usage
simple_icon("SiReact")

# With props
simple_icon("SiReact", color="#61DAFB", size=32)

# Using the class directly
SimpleIcon.create("SiGithub", size=24)
The icon name cannot be passed as a keyword argument - it must be the first positional argument.

​
Dynamic Icon Imports

The component dynamically imports the specific icon from the library using the add_imports() method. This means:
  1. Each icon is imported individually
  2. Only the icons you use are included in your bundle
  3. The tag is set to the provided icon_name
def add_imports(self):
    """Add the specific icon import."""
    return {
        self.library: ImportVar(
            tag=self.tag,
            is_default=False,
        )
    }

​
Icon Names

Icon names follow the Simple Icons naming convention with the Si prefix:
  • React: SiReact
  • GitHub: SiGithub
  • Python: SiPython
  • JavaScript: SiJavascript
  • TypeScript: SiTypescript
  • Docker: SiDocker
  • AWS: SiAmazon
Browse all available icons at: To find the correct icon name, take the brand name from Simple Icons and prefix it with Si in PascalCase.

Build docs developers (and LLMs) love

Get started for freeTalk to us