1---
2title: Appearance and Visual Customization - Zed
3description: Customize Zed's themes, fonts, icons, UI density, and other visual settings to match your preferences.
4---
5
6# Appearance
7
8Customize Zed's visual appearance to match your preferences. This guide covers themes, fonts, icons, and other visual settings.
9
10For information on how the settings system works, see [All Settings](./reference/all-settings.md).
11
12## Customize Zed in 5 Minutes
13
14Here's how to make Zed feel like home:
15
161. **Pick a theme**: Press {#kb theme_selector::Toggle} to open the Theme Selector. Arrow through the list to preview themes in real time, and press Enter to apply.
17
182. **Toggle light/dark mode quickly**: Press {#kb theme::ToggleMode}. If you currently use a static `"theme": "..."` value, the first toggle converts it to dynamic mode settings with default themes.
19
203. **Choose an icon theme**: Run `icon theme selector: toggle` from the command palette to browse icon themes.
21
224. **Set your font**: Open the Settings Editor with {#kb zed::OpenSettings} and search for `buffer_font_family`. Set it to your preferred coding font.
23
245. **Adjust font size**: In the same Settings Editor, search for `buffer_font_size` and `ui_font_size` to tweak the editor and interface text sizes.
25
26That's it. You now have a personalized Zed setup.
27
28## Themes
29
30Install themes from the Extensions page ({#action zed::Extensions}), then switch between them with the Theme Selector ({#kb theme_selector::Toggle}).
31
32Zed supports separate themes for light and dark mode with automatic switching based on your system preference:
33
34```json [settings]
35{
36 "theme": {
37 "mode": "system",
38 "light": "One Light",
39 "dark": "One Dark"
40 }
41}
42```
43
44You can also override specific theme attributes for fine-grained control.
45
46→ [Themes documentation](./themes.md)
47
48## Icon Themes
49
50Customize file and folder icons in the Project Panel and tabs. Browse available icon themes with the Icon Theme Selector (`icon theme selector: toggle` in the command palette).
51
52Like color themes, icon themes support separate light and dark variants:
53
54```json [settings]
55{
56 "icon_theme": {
57 "mode": "system",
58 "light": "Zed (Default)",
59 "dark": "Zed (Default)"
60 }
61}
62```
63
64→ [Icon Themes documentation](./icon-themes.md)
65
66## Fonts
67
68Zed uses three font settings for different contexts:
69
70| Setting | Used for |
71| ---------------------- | ------------------------- |
72| `buffer_font_family` | Editor text |
73| `ui_font_family` | Interface elements |
74| `terminal.font_family` | [Terminal](./terminal.md) |
75
76Example configuration:
77
78```json [settings]
79{
80 "buffer_font_family": "JetBrains Mono",
81 "buffer_font_size": 14,
82 "ui_font_family": "Inter",
83 "ui_font_size": 16,
84 "terminal": {
85 "font_family": "JetBrains Mono",
86 "font_size": 14
87 }
88}
89```
90
91### Font Ligatures
92
93To disable font ligatures:
94
95```json [settings]
96{
97 "buffer_font_features": {
98 "calt": false
99 }
100}
101```
102
103### Line Height
104
105Adjust line spacing with `buffer_line_height`:
106
107- `"comfortable"` — 1.618 ratio (default)
108- `"standard"` — 1.3 ratio
109- `{ "custom": 1.5 }` — Custom ratio
110
111## UI Elements
112
113Zed provides extensive control over UI elements including:
114
115- **Tab bar** — Show/hide, navigation buttons, file icons, git status
116- **Status bar** — Language selector, cursor position, line endings
117- **Scrollbar** — Visibility, git diff indicators, search results
118- **Minimap** — Code overview display
119- **Gutter** — Line numbers, fold indicators, breakpoints
120- **Panels** — Project Panel, Terminal, Agent Panel sizing and docking
121
122→ [Visual Customization documentation](./visual-customization.md) for all UI element settings
123
124## What's Next
125
126- [All Settings](./reference/all-settings.md) — Complete settings reference
127- [Key bindings](./key-bindings.md) — Customize keyboard shortcuts
128- [Vim Mode](./vim.md) — Enable modal editing