# Icon Reference URL: /bengal/docs/0.4.3/reference/icons/ Section: reference Tags: reference, icons, svg -------------------------------------------------------------------------------- Icon Reference 130 theme-aware SVG icons powered by Phosphor Icons. All icons adapt to light/dark mode using currentColor. 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 Star icon--secondary Bookmark icon--success Check icon--warning Warning icon--danger Error icon--info Info icon--muted Question icon--example Flask Icon Gallery Bengal Icon Name Description Bengal Rosette bengal-rosette Bengal signature rosette Terminal terminal CLI/commands Docs docs Documentation Bug bug Bugs/errors Navigation Icon Name Description Search search Search Magnifying Glass magnifying-glass Search (alternative) Menu menu Menu toggle Close close Close/dismiss X x Close (alternative) Chevron Right chevron-right Navigate forward Chevron Left chevron-left Navigate back Chevron Down chevron-down Expand Chevron Up chevron-up Collapse Caret Right caret-right Caret forward Caret Left caret-left Caret back Caret Down caret-down Caret expand Caret Up caret-up Caret collapse arrow-right Arrow forward arrow-left Arrow back Arrow Up arrow-up Arrow up Arrow Clockwise arrow-clockwise Refresh/reload Link link Internal link External external External link house Home compass Explore/discover map Map/sitemap sidebar Sidebar toggle sidebar-simple Sidebar (simple) Content Icon Name Description File file File/document File Text file-text Text document File Code file-code Code file File Py file-py Python file File Js file-js JavaScript file File Ts file-ts TypeScript file Folder folder Folder/directory Code code Code block Function function Function/method Notepad notepad Notes/text book Book/guide book-open Open book Article article Article/blog post Newspaper newspaper News/updates Copy copy Copy Edit edit Edit pencil Pencil/write Feather feather Light writing Bookmark bookmark Bookmark Tag tag Tag/label image Image List list List layers Layers/stack Stack stack Stack/architecture funnel Filter (funnel) Filter filter Filter Tree Structure tree-structure Hierarchy/tree Status & Admonitions Icon Name Description Check check Success/check check-circle Success (circled) Success success Success admonition Info info Information Lightbulb lightbulb Ideas/tips Note note Note admonition Tip tip Tip admonition Warning warning Warning Caution caution Caution Danger danger Danger Error error Error Example example Example Question question Help/question Sparkle sparkle New/sparkle Actions Icon Name Description Download download Download Upload upload Upload Trash trash Delete Star star Favorite Heart heart Like share Share eye View/preview zoom-in Zoom in zoom-out Zoom out enlarge Expand/enlarge reset Reset recycle Recycle/refresh Wrench wrench Tools/fix zap Quick action Lightning lightning Fast/speed rocket Launch/start Development & Git Icon Name Description Git Branch git-branch Git branch Git Commit git-commit Git commit Code Branch code-branch Code branch Package package Package/module Cube cube Block/component Puzzle Piece puzzle-piece Integration/plugin Puzzle puzzle Puzzle (alias) Flask flask Testing/experiments Workflow workflow Workflow/pipeline Infrastructure & Security Icon Name Description Server server Server Container container Container/Docker Hard Drives hard-drives Storage/drives Database database Database Cloud cloud Cloud/hosting Network network Network/connectivity Cpu cpu CPU/performance Shield shield Security Lock lock Locked/private Key key Key/authentication Briefcase briefcase Business/work Time & Location Icon Name Description Clock clock Time Timer timer Timer/countdown Calendar calendar Date Pin pin Location Globe globe Global/international Translate translate Translation/i18n Theme & Settings Icon Name Description Settings settings Settings Palette palette Theme Sun sun Light mode Moon moon Dark mode Monitor monitor System/display Users Icon Name Description User 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 Atomic age symbol Starburst starburst Sputnik starburst Boomerang boomerang Retro boomerang Quick Preview All icons at 32px: Navigation: Menu Search Close Chevron Up Chevron Down Chevron Left Chevron Right Link External Status: Check Info Lightbulb Warning Error Note Tip Danger Sparkle Files: File File Text File Code File Py File Js File Ts Folder Code Function Notepad Article Newspaper Actions: Download Upload Trash Star Heart Wrench Lightning Development: Git Branch Git Commit Code Branch Package Cube Puzzle Piece Flask Workflow Infrastructure: Server Container Hard Drives Database Cloud Network Cpu Shield Lock Key Time & Location: Clock Timer Calendar Pin Globe Translate Theme: Settings Palette Sun Moon Monitor Users: User Briefcase Social: AI: Bengal: Bengal Rosette Terminal Docs Bug Mid-Century: Atomic Starburst Boomerang Structure: Stack Tree Structure Filter Feather 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): Site theme: site/themes/{theme}/assets/icons/{name}.svg Theme icons: bengal/themes/{theme}/assets/icons/{name}.svg Parent theme: bengal/themes/{parent}/assets/icons/{name}.svg 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), set extend_defaults to false in your theme.yaml: # themes/my-theme/theme.yaml name: my-theme icons: extend_defaults: false # Only theme icons available Caution Caution With extend_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: Uses currentColor for automatic light/dark mode support Related Formatting Directives — Buttons with icons Assets — Asset pipeline for custom icons Content Authoring — Using icons in content -------------------------------------------------------------------------------- Metadata: - Author: lbliii - Word Count: 995 - Reading Time: 5 minutes