---
title: "Code Block Icons"
sidebar_position: 2.1
sidebar_custom_props:
  section: "Features"
  section_position: 2
---

# Code Block Icons

Add visual context to your code blocks with file-type icons from the VSCode Icons collection.

## Overview

The theme includes automatic icon support for code blocks using UnoCSS and Iconify. Icons are scanned from your markdown files and automatically included in the build.

## Basic Usage

Add icons to code blocks using the tilde syntax in the code block label:

````markdown
```docker [dockerfile ~i-vscode-icons:file-type-docker~]
FROM python:3.13
```

```python [hello.py ~i-vscode-icons:file-type-python~]
print('Hello, world!')
```

```yaml [play.yml ~i-vscode-icons:file-type-ansible~]
- name: Update web servers
  hosts: webservers
  remote_user: root
```
````

## Common VSCode Icons

| Icon Syntax | Description |
|-------------|-------------|
| `~i-vscode-icons:file-type-docker~` | Docker |
| `~i-vscode-icons:file-type-python~` | Python |
| `~i-vscode-icons:file-type-typescript-official~` | TypeScript |
| `~i-vscode-icons:file-type-javascript-official~` | JavaScript |
| `~i-vscode-icons:file-type-vue~` | Vue.js |
| `~i-vscode-icons:file-type-react~` | React |
| `~i-vscode-icons:file-type-kubernetes~` | Kubernetes |
| `~i-vscode-icons:file-type-terraform~` | Terraform |
| `~i-vscode-icons:file-type-yaml~` | YAML |
| `~i-vscode-icons:file-type-json~` | JSON |
| `~i-vscode-icons:file-type-markdown~` | Markdown |
| `~i-vscode-icons:file-type-git~` | Git |

## Finding More Icons

Browse the full VSCode Icons collection at [icon-sets.iconify.design/vscode-icons](https://icon-sets.iconify.design/vscode-icons/).

All icons follow the pattern: `~i-vscode-icons:file-type-{name}~`

## How It Works

The theme uses UnoCSS to automatically scan your markdown files for icon patterns and includes them in the build:

1. During build, `uno.config.ts` scans all `.md` files in your project
2. It extracts icon references matching the pattern `~i-vscode-icons:*~`
3. Only the icons you use are included in the final bundle
4. Icons are rendered inline with your code block labels

This automatic scanning means you can use any VSCode icon without manual configuration!

## Technical Details

The icon scanning is configured in `uno.config.ts`:

```typescript
function scanFilesForIcons() {
  const slideFiles = globSync('**/*.md', { absolute: true })
  const iconPattern = /~(i-[a-zA-Z0-9-]+:[a-zA-Z0-9-]+)~/g
  const icons = new Set()
  
  slideFiles.forEach((file: string) => {
    const content = fs.readFileSync(file, 'utf-8')
    let match
    while ((match = iconPattern.exec(content)) !== null) {
      icons.add(match[1])
    }
  })
  
  return Array.from(icons)
}
```

This ensures optimal bundle size by including only the icons you actually use in your presentation.