Skip to content

The Reflex Icon Library

The Reflex Icon Library (RIL) is your one-stop icon shop for Reflex projects. It includes the icon libraries of Font Awesome, Simple Icons, Google's Material Symbols, GitHub's Octicons, Phosphor, and Bootstrap Icons, packaging over 12,000 icons in total.

Installation

pip install reflex-icon-library

Usage

import reflex as rx
import RIL as icons


def index() -> rx.Component:
    return rx.container(
        icons.fontawesome.solid("house"),
        icons.simple("python"),
        icons.material("Search"),
        icons.octicons("check-circle-fill"),
        icons.phosphor("acorn"),
        icons.bootstrap("airplane"),
    )


app = rx.App()
app.add_page(index)

RIL does not validate icon names

Passing the name of an icon that doesn't exist will get you a cryptic error from React, but RIL itself won't complain. If you're passing an icon name that's not working and you're confident it should, please open an issue.

This is just a basic example. For detailed usage instructions, see the documentation for each icon library:

RIL also includes a convenience wrapper for Reflex's built-in icon compoment:

Configuration

Some of RIL's icon libraries have globally-configurable settings. Each of them will be reintroduced as they become relevant, but here's a quick overview of them all.

Setting
 Description Default
pro_enabled Whether or not to enable the use of Font Awesome Pro icons. (More) False
kit_code A Font Awesome Kit code. If provided, the corresponding Kit will be used for all Font Awesome icons. (More) N/A
npm_registry The URL of a registry from which Reflex should install packages in the @fortawesome and @awesome.me namespaces when Font Awesome Pro is enabled. (More) https://npm.fontawesome.com
Setting
 Description Default
version The newest major version of Simple Icons that RIL may use, or latest for the latest version. (More) latest
Setting
 Description
weight, color, size Default styling options to apply to Phosphor icons. (More)

Configuration sources

RIL can be configured through a pyproject.toml file, an ril.toml file, or environment variables.

If your project uses a pyproject.toml file, you can configure RIL via the [tool.ril.library] table, where library is one of fontawesome, simple, or phosphor:

[tool.ril.library]
setting_name = value "(1)!"
  1. Setting names must be written in snake_case rather than kebab-case.

pyproject.toml must be in your current working directory for RIL to see it. (1)

  1. If the root of your Reflex project (i.e., the parent directory of rxconfig.py) and the parent directory of pyproject.toml are not the same directory, using ril.toml may be easier for you.

If you don't want to use pyproject.toml, you can use RIL's own ril.toml. This works identically to pyproject.toml, except the table is simply named [library], where library is one of fontawesome, simple, or phosphor:

[library]
setting_name = value "(1)!"
  1. Setting names must be written in snake_case rather than kebab-case.

ril.toml must be in your current working directory for RIL to see it.

You can configure RIL's settings via environment variables of the name RIL_{LIBRARY}__{SETTING_NAME}, where {LIBRARY} is one of FONTAWESOME, SIMPLE, or PHOSPHOR and {SETTING_NAME} is the name of the setting you want to configure. Variable names are case-insensitive.

Note that there are two underscores between {LIBRARY} and {SETTING_NAME}.

If you put your environment variables in a .env file located in the current working directory, RIL will read and apply it automatically without the need for additional libraries or tools.

RIL reads configuration sources with the following priority:

  1. Environment variables
  2. .env
  3. pyproject.toml
  4. ril.toml

Updating icon libraries

Whenever new icons are added to any of RIL's supported libraries, you don't need to wait for an RIL update to use them. Just have Reflex to reinstall your project's frontend packages and you'll be good to go:

reflex init && reflex run