Skip to content

Phosphor

Phosphor is a library of over 1,000 icons, each in six different styles.

Usage

  1. Find the icon you want
  2. Pass its name to icons.phosphor
import RIL as icons

icons.phosphor("acorn")

Icon names are case-inensitive.

Props

Name Type Description
variant str The variant of the icon. May be one of "thin", "light", "regular", "bold", "fill", or "duotone".
color str | tuple May be an rx.color object or Pydantic-recognized color definition.
size int | str The size of the icon. May be an integer (in pixels) or a CSS size string (e.g., "1rem").
alt str Alt text for the icon.

Context

RIL supports the use of Phosphor's Context feature to apply a default style to a group of icons.

import RIL as icons

icons.phosphor.context(
    icons.phosphor("horse"),  # I'm lime-green, 32px, and bold!
    icons.phosphor("heart"),  # Me too!
    icons.phosphor("cube"),  # Me three :)
    color="limegreen",
    size=32,
    variant="bold",
)

Global Context

You can configure the phosphor settings group to have a default style applied to all Phosphor icons in your project.

phosphor.*: Settings for configuring Phosphor icons.

The phosphor settings group allows you to configure default styling options that will be applied to all Phosphor icons in your project.

You can configure a default for any prop other than alt.

[tool.ril.phosphor]
color = "limegreen"
size = 32
variant = "bold"

[phosphor]
color = "limegreen"
size = 32
variant = "bold"

RIL_PHOSPHOR__COLOR="limegreen"
RIL_PHOSPHOR__SIZE=32
RIL_PHOSPHOR__VARIANT="bold"