how to add icons in bubble tea

bubble-tea-icons.md

Recreating Airflow-style Status Icons in Bubble Tea

This guide explains how to implement color-coded status indicators in a Go TUI application using bubbletea and lipgloss.

🛠️ Prerequisites

You will need the following libraries:

go get github.com/charmbracelet/bubbletea
go get github.com/charmbracelet/lipgloss

🚀 The Core Concept

In a terminal, we cannot use SVG or PNG icons. Instead, we use Unicode symbols and style them using ANSI colors.

1. Choose your Symbol

For the Airflow look, we use the Small Square symbol:

• Filled Square: ■ (Unicode U+25A0)
• Empty Square: □ (Unicode U+25A1)

2. Map States to Colors

Create a mapping between your logical state (e.g., Success) and a lipgloss.Style that defines the color.

type State string

const (
    Success State = "success"
    Failed  State = "failed"
)

// Define the styles
var stateStyles = map[State]lipgloss.Style{
    Success: lipgloss.NewStyle().Foreground(lipgloss.Color("2")),   // Green
    Failed:  lipgloss.NewStyle().Foreground(lipgloss.Color("1")),   // Red
}

3. Create the Icon Mapping

Combine the symbol and the text label in a map.

var stateIcons = map[State]string{
    Success: "■ success",
    Failed:  "■ failed",
}

4. Render the Final String

When rendering your view, look up the style and the icon text, then use the .Render() method.

func renderState(state State) string {
    style := stateStyles[state]
    text := stateIcons[state]
    return style.Render(text)
}

🎨 Color Palette Reference

To match the Airflow UI exactly, use these Xterm-256 color codes:

State	Symbol	Color Code	Lip Gloss Color
Success	■	Green	lipgloss.Color("2")
Running	■	Light Green	lipgloss.Color("10")
Failed	■	Red	lipgloss.Color("1")
Queued	■	Gray	lipgloss.Color("8")
Up for Retry	■	Yellow	lipgloss.Color("3")
Upstream Failed	■	Orange	lipgloss.Color("208")
Skipped	■	Pink	lipgloss.Color("211")
No Status	□	White	lipgloss.Color("255")

💡 Pro Tips

• Consistency: Always use the same Unicode character for the blocks so they align perfectly in your table.
• Accessibility: Keep the text label (e.g., "success") next to the icon. This ensures that people with color-blindness can still understand the status.
• Alignment: Use lipgloss.JoinHorizontal or set a fixed Width() on your columns to ensure the icons line up vertically.