Icon Reference

SVG icon library with theme-aware styling

4 min read 742 words

Theme-aware SVG icons powered by Phosphor Icons, a comprehensive open-source icon library with 6,000+ icons. All icons adapt to light/dark mode usingcurrentColor.

Syntax

Syntax Use Example
:::{icon} name Block :::{icon} terminal :size: 48 :::
{icon}name`` Inline {icon}terminal``
{icon}name:size`` Inline + size {icon}terminal:16``
{icon}name:size:class`` Inline + size + class {icon}terminal:24:icon-primary``

Options

Option Default Description
:size: 24 Icon size in pixels
:class: — CSS classes (icon-primary,icon-success, etc.)
:aria-label: — Accessibility label

Color Classes

Class Preview
icon-primary
icon-success
icon-warning
icon-danger
icon-muted

Bengal

Icon Name Description
bengal-rosette Bengal signature rosette
terminal CLI/commands
docs Documentation
Icon Name Description
search Search
menu Menu toggle
close Close/dismiss
chevron-right Navigate forward
chevron-left Navigate back
chevron-down Expand
chevron-up Collapse
link Internal link
external External link

Content

Icon Name Description
file File/document
folder Folder/directory
code Code block
notepad Notes/text
copy Copy
edit Edit
bookmark Bookmark
tag Tag/label

Status

Icon Name Description
check Success
info Information
warning Warning
error Error

Actions

Icon Name Description
download Download
upload Upload
trash Delete
star Favorite
heart Like

Time & Location

Icon Name Description
clock Time
calendar Date
pin Location

Theme & Settings

Icon Name Description
settings Settings
palette Theme
sun Light mode
moon Dark mode

Mid-Century Modern

Icon Name Description
atomic Atomic age symbol
starburst Sputnik starburst
boomerang Retro boomerang

Quick Preview

All icons at 32px for easy viewing:

Navigation:

Status:

Files:

Actions:

Time & Location:

Theme:

Bengal:

Mid-Century:

Custom Icons

Place SVG files inthemes/your-theme/assets/icons/:

themes/my-theme/assets/icons/
├── my-icon.svg
└── another.svg

Then use with the same syntax:

{icon}`my-icon:24`

Icon Source

Bengal uses Phosphor Icons - a high-quality, open-source icon library with:

  • 6,000+ icons covering all common use cases
  • Multiple weights: Thin, Light, Regular, Bold, Fill, Duotone
  • MIT License - free for commercial use
  • Consistent design - all icons follow the same design principles
  • Theme-aware - usescurrentColorfor automatic light/dark mode support

SVG Format

Phosphor icons use:

  • viewBox="0 0 256 256"(scales automatically via width/height)
  • fill="currentColor"on paths (theme-aware)
  • fill="none"on root SVG element
  • Clean, minimal design optimized for UI

Icons are automatically sized via the:size:parameter and inherit colors from the current theme.