Skip to main content
The SimpleIcon component provides access to 3000+ brand and logo icons from the Simple Icons project.

​
Installation

Simple Icons are included with Reflex UI and automatically import from @icons-pack/[email protected].

​
Basic Usage

import reflex_ui as ui

# React logo
ui.simple_icon("SiReact")

# GitHub logo with custom size
ui.simple_icon("SiGithub", size=24)

# Python logo with custom color
ui.simple_icon("SiPython", color="#3776AB", size=32)

​
Props

​
icon_name
str
required
The icon component name from Simple Icons. Must start with “Si” followed by the brand name (e.g., “SiReact”, “SiGithub”, “SiPython”).
​
color
str
The color of the icon. Accepts any valid CSS color value (hex, rgb, named colors).
​
size
int | str
The size of the icon. Can be a number (pixels) or string with units.

​
Examples

​
Technology Stack

Display your technology stack with brand logos: 
import reflex as rx
import reflex_ui as ui

def tech_stack():
    return rx.hstack(
        ui.simple_icon("SiReact", size=32),
        ui.simple_icon("SiPython", size=32),
        ui.simple_icon("SiPostgresql", size=32),
        ui.simple_icon("SiDocker", size=32),
        spacing="4",
    )

import reflex as rx
import reflex_ui as ui

def social_links():
    return rx.hstack(
        rx.link(
            ui.simple_icon("SiGithub", size=24),
            href="https://github.com/yourorg",
        ),
        rx.link(
            ui.simple_icon("SiTwitter", size=24, color="#1DA1F2"),
            href="https://twitter.com/yourhandle",
        ),
        rx.link(
            ui.simple_icon("SiLinkedin", size=24, color="#0A66C2"),
            href="https://linkedin.com/company/yourcompany",
        ),
        spacing="4",
    )

​
Custom Colors

# Use brand colors
ui.simple_icon("SiTwitter", color="#1DA1F2", size=32)

# Use custom colors
ui.simple_icon("SiReact", color="#61DAFB", size=32)

# Use Tailwind colors via className
rx.box(
    ui.simple_icon("SiGithub", size=32),
    class_name="text-gray-800 dark:text-white",
)

​
Finding Icons

Browse all available icons at simpleicons.org. Each icon has:
  • Icon Name: The brand name (e.g., “React”, “GitHub”)
  • Component Name: Add “Si” prefix to the brand name (e.g., “SiReact”, “SiGithub”)
  • Brand Color: Official brand color hex code

​
Icon Naming Convention

Simple Icons uses a consistent naming pattern: 
# Brand name -> Component name
ui.simple_icon("SiReact")        # React
ui.simple_icon("SiGithub")       # GitHub
ui.simple_icon("SiPython")       # Python
ui.simple_icon("SiTypescript")   # TypeScript
ui.simple_icon("SiDocker")       # Docker
ui.simple_icon("SiKubernetes")   # Kubernetes
ui.simple_icon("SiPostgresql")   # PostgreSQL
ui.simple_icon("SiMongodb")      # MongoDB

​
Common Use Cases

  • Technology logos: Display frameworks, languages, and tools
  • Social media icons: Link to social profiles
  • Payment providers: Show accepted payment methods
  • Integration logos: Display third-party integrations
  • Company logos: Show partners or clients

Build docs developers (and LLMs) love

Get started for freeTalk to us