# Assets

URL: /docs/theming/assets/
Section: assets

--------------------------------------------------------------------------------

Asset Pipeline Bengal processes your CSS, JavaScript, images, and fonts with optional minification and fingerprinting. How Assets Flow flowchart LR subgraph Sources A[static/] B[assets/] C[Theme assets] D[Page bundles] end subgraph Processing E[Collect] F[Minify] G[Fingerprint] end subgraph Output H[public/] end A --> E B --> E C --> E D --> E E --> F --> G --> H Asset Locations Location Copied To Processing Use For static/ public/ None Files that don't need processing assets/ public/ Full pipeline CSS/JS needing minification Theme's static/ public/ None Theme's static files Page bundles public/ Scope-limited Page-specific images/data Quick Reference Configuration Template Usage Page Bundle Assets 1 2 3 4 5# bengal.toml [build.assets] minify_css = true minify_js = true fingerprint = true # main.css → main.a1b2c3.css 1 2 3 4 5 6 7 8{# Basic asset URL #} <link rel="stylesheet" href="{{ 'css/main.css' | asset_url }}"> {# With fingerprint for cache-busting #} <link rel="stylesheet" href="{{ 'css/main.css' | fingerprint }}"> {# Images #} <img src="{{ 'images/logo.png' | asset_url }}" alt="Logo"> 1 2 3 4{# Access assets co-located with current page #} {% for image in page.resources.match("*.jpg") %} <img src="{{ image.url }}" alt="{{ image.title }}"> {% endfor %} Tip Tip Fingerprinting adds a hash to filenames (main.a1b2c3.css) for cache-busting. Enable it in production for optimal caching. Icons Bengal includes a comprehensive Icon Reference powered by Phosphor Icons. Use inline icons in content with {icon}name`` syntax: {icon}`check:24:icon-success` Task complete! For custom icons, place SVG files in themes/your-theme/assets/icons/. See the Icon Reference for the full gallery and customization options.

--------------------------------------------------------------------------------

Metadata:
- Author: lbliii
- Word Count: 250
- Reading Time: 1 minutes