Icon Reference

SVG icon library with theme-aware styling

9 min read 1731 words

130 theme-aware SVG icons powered by Phosphor 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``

Aliases:{svg-icon}

Options

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

Color Classes

Class Preview
icon--primary
icon--secondary
icon--success
icon--warning
icon--danger
icon--info
icon--muted
icon--example

Bengal

Icon Name Description
bengal-rosette Bengal signature rosette
terminal CLI/commands
docs Documentation
bug Bugs/errors
Icon Name Description
search Search
magnifying-glass Search (alternative)
menu Menu toggle
close Close/dismiss
x Close (alternative)
chevron-right Navigate forward
chevron-left Navigate back
chevron-down Expand
chevron-up Collapse
caret-right Caret forward
caret-left Caret back
caret-down Caret expand
caret-up Caret collapse
arrow-right Arrow forward
arrow-left Arrow back
arrow-up Arrow up
arrow-clockwise Refresh/reload
link Internal link
external External link
house Home
compass Explore/discover
map Map/sitemap
sidebar Sidebar toggle
sidebar-simple Sidebar (simple)

Content

Icon Name Description
file File/document
file-text Text document
file-code Code file
file-py Python file
file-js JavaScript file
file-ts TypeScript file
folder Folder/directory
code Code block
function Function/method
notepad Notes/text
book Book/guide
book-open Open book
article Article/blog post
newspaper News/updates
copy Copy
edit Edit
pencil Pencil/write
feather Light writing
bookmark Bookmark
tag Tag/label
image Image
list List
layers Layers/stack
stack Stack/architecture
funnel Filter (funnel)
filter Filter
tree-structure Hierarchy/tree

Status & Admonitions

Icon Name Description
check Success/check
check-circle Success (circled)
success Success admonition
info Information
lightbulb Ideas/tips
note Note admonition
tip Tip admonition
warning Warning
caution Caution
danger Danger
error Error
example Example
question Help/question
sparkle New/sparkle

Actions

Icon Name Description
download Download
upload Upload
trash Delete
star Favorite
heart Like
share Share
eye View/preview
zoom-in Zoom in
zoom-out Zoom out
enlarge Expand/enlarge
reset Reset
recycle Recycle/refresh
wrench Tools/fix
zap Quick action
lightning Fast/speed
rocket Launch/start

Development & Git

Icon Name Description
git-branch Git branch
git-commit Git commit
code-branch Code branch
package Package/module
cube Block/component
puzzle-piece Integration/plugin
puzzle Puzzle (alias)
flask Testing/experiments
workflow Workflow/pipeline

Infrastructure & Security

Icon Name Description
server Server
container Container/Docker
hard-drives Storage/drives
database Database
cloud Cloud/hosting
network Network/connectivity
cpu CPU/performance
shield Security
lock Locked/private
key Key/authentication
briefcase Business/work

Time & Location

Icon Name Description
clock Time
timer Timer/countdown
calendar Date
pin Location
globe Global/international
translate Translation/i18n

Theme & Settings

Icon Name Description
settings Settings
palette Theme
sun Light mode
moon Dark mode
monitor System/display

Users

Icon Name Description
user User/profile
users Multiple users/team
graduation-cap Education/learning

Social & Platforms

Icon Name Description
github-logo GitHub
twitter-logo Twitter/X
linkedin-logo LinkedIn
facebook-logo Facebook

AI Providers

Icon Name Description
ai-chatgpt ChatGPT
ai-claude Claude
ai-copilot GitHub Copilot
ai-gemini Google Gemini

Mid-Century Modern

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

Quick Preview

All icons at 32px:

Navigation:

Status:

Files:

Actions:

Development:

Infrastructure:

Time & Location:

Theme:

Users:

Social:

AI:

Bengal:

Mid-Century:

Structure:

Custom Icons

Bengal supports theme-aware icon resolution — add your own icons or override defaults without forking the theme.

Resolution Order

Icons are resolved in priority order (first match wins):

  1. Site theme:site/themes/{theme}/assets/icons/{name}.svg
  2. Theme icons:bengal/themes/{theme}/assets/icons/{name}.svg
  3. Parent theme:bengal/themes/{parent}/assets/icons/{name}.svg
  4. Bengal defaults:bengal/themes/default/assets/icons/{name}.svg

Adding Custom Icons

Create an icons directory in your theme:

your-project/
└── themes/
    └── my-theme/
        └── assets/
            └── icons/
                ├── company-logo.svg   # New icon
                ├── custom-badge.svg   # New icon
                └── warning.svg        # Overrides default

Then use with the standard syntax:

{icon}`company-logo:24`
{icon}`custom-badge:32:icon-primary`

Overriding Default Icons

To replace a default icon, add a file with the same name:

themes/my-theme/assets/icons/
└── warning.svg    # Your custom warning icon

All uses of {icon}warning`` will now render your version.

Disabling Default Fallback

To use only your icons (no Phosphor fallback), setextend_defaults to false in your theme.yaml:

# themes/my-theme/theme.yaml
name: my-theme

icons:
  extend_defaults: false  # Only theme icons available

Caution

Withextend_defaults: false, any icon not in your theme will show a missing icon indicator.

SVG Format Requirements

Icons should follow this format for proper theme integration:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="none">
  <title>Icon Name</title>
  <path fill="currentColor" d="..."/>
</svg>
Attribute Value Purpose
viewBox 0 0 256 256 Phosphor's native size (scales via width/height)
fill on <svg> none Prevents background fill
fill on <path> currentColor Inherits text color (theme-aware)
<title> Icon name Accessibility

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

Icon Source

Bengal uses Phosphor Icons as its base icon set:

  • MIT License: Free for commercial use
  • Consistent design: All icons follow the same design principles
  • Theme-aware: UsescurrentColorfor automatic light/dark mode support