# Assets

URL: /bengal/docs/build-sites/customize/assets/
Section: assets
Description: CSS, JavaScript, images, and fonts

---

> For a complete page index, fetch /bengal/llms.txt.

Bengal processes your CSS, JavaScript, images, and fonts with optional
minification and fingerprinting.

Note

Do I need this? Yes when adding custom CSS/JS, optimizing assets, or
debugging missing styles. Skip if your theme handles assets and you only write
Markdown content.

## 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 (#)

toml
TOML

```
# bengal.toml
[assets]
minify = true
optimize = true
fingerprint = true   # main.css → main.a1b2c3.css
```

kida
KIDA

```
{# Basic asset URL (function syntax) #}
<link rel="stylesheet" href="{{ asset_url('css/main.css') }}">

{# Fingerprinting is automatic when enabled in config #}
{# Outputs: /assets/css/main.a1b2c3.css #}

{# Images #}
<img src="{{ asset_url('images/logo.png') }}" alt="Logo">
```

kida
KIDA

```
{# Access assets co-located with current page #}
{% for image in page.resources.match("*.jpg") %}
  <img src="{{ image.rel_permalink }}" alt="{{ image.title }}">
{% end %}
```

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 (/bengal/docs/reference/icons/) powered by Phosphor Icons. Use inline icons in content with`{icon}`name`` syntax:

markdown
MARKDOWN

```
{icon}`check:24:icon-success` Task complete!
```
For custom icons, place SVG files in `themes/your-theme/assets/icons/`. See the Icon Reference (/bengal/docs/reference/icons/) for the full gallery and customization options.

Kida Template Engine (/bengal/docs/build-sites/customize/templating/kida/)

Template engine with unified block endings, pattern matching, pipelines, and automatic caching

Related

Templating (/bengal/docs/build-sites/customize/templating/)

Kida template engine, layouts, inheritance, and partials

Related

Build Sites (/bengal/docs/build-sites/)

Write, structure, customize, and extend your Bengal site

Related

Theming (/bengal/docs/build-sites/customize/)

Templates, assets, and visual customization

Related

Template Cookbook (/bengal/docs/build-sites/customize/recipes/)

Common templating patterns and Bengal-specific features

Related

persona-themer (/bengal/tags/persona-themer/)