# Icon Reference URL: /docs/reference/icons/ Section: reference Tags: reference, icons, svg -------------------------------------------------------------------------------- Icon Reference 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 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`` 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 Star icon-success Check icon-warning Warning icon-danger Error icon-muted Info Icon Gallery Bengal Icon Name Description Bengal Rosette bengal-rosette Bengal signature rosette Terminal terminal CLI/commands Docs docs Documentation Navigation Icon Name Description Search search Search Menu menu Menu toggle Close close Close/dismiss Chevron Right chevron-right Navigate forward Chevron Left chevron-left Navigate back Chevron Down chevron-down Expand Chevron Up chevron-up Collapse Link link Internal link External external External link Content Icon Name Description File file File/document Folder folder Folder/directory Code code Code block Notepad notepad Notes/text Copy copy Copy Edit edit Edit Bookmark bookmark Bookmark Tag tag Tag/label Status Icon Name Description Check check Success Info info Information Warning warning Warning Error error Error Actions Icon Name Description Download download Download Upload upload Upload Trash trash Delete Star star Favorite Heart heart Like Time & Location Icon Name Description Clock clock Time Calendar calendar Date Pin pin Location Theme & Settings Icon Name Description Settings settings Settings Palette palette Theme Sun sun Light mode Moon moon Dark mode 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 for easy viewing: Navigation: Menu Search Close Chevron Up Chevron Down Chevron Left Chevron Right Link External Status: Check Info Warning Error Files: File Folder Code Notepad Copy Edit Actions: Download Upload Trash Star Heart Bookmark Tag Time & Location: Clock Calendar Pin Theme: Settings Palette Sun Moon Bengal: Bengal Rosette Terminal Docs Mid-Century: Atomic Starburst Boomerang Custom Icons Place SVG files in themes/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 - uses currentColor for 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. Related Formatting Directives — Buttons with icons Assets — Asset pipeline for custom icons Content Authoring — Using icons in content -------------------------------------------------------------------------------- Metadata: - Author: lbliii - Word Count: 462 - Reading Time: 2 minutes