Section Icon — Add SVG icons to Section Breaks in Frappe forms

,
1

The problem

Long ERP forms with many sections (Employee, Customer, Project, custom DocTypes) can feel flat. Section titles are text-only, so users scan by reading labels instead of recognizing sections at a glance. That hurts usability on dense forms, especially for new users.

Screenshot from 2026-05-21 11-19-00
Screenshot from 2026-05-21 11-19-00480×270 8.26 KB

How it improves UX/UI

1. Visual scanning and orientation
Icons give each section a quick visual anchor. Users can jump to “Passport Details”, “Bank Details”, or “Attachments” faster than with text alone.

2. Cleaner, more modern forms
A small icon next to the section head makes the layout feel closer to modern SaaS UIs while staying within standard Frappe form structure.

3. Works in light and dark theme
Upload icons from libraries that use black/dark grey fills (common for SVG packs). The app automatically adapts grayscale fills and strokes when the desk theme changes:

  • Dark theme: black → white, dark greys → lighter greys

  • Light theme: white → black, light greys → darker greys

  • Colored icons are left unchanged so brand colors stay intact

No need to maintain separate SVG files per theme.

4. Better admin experience when configuring icons
When creating a Section Icon record:

  1. Pick the target DocType

  2. Choose the Section Break from a searchable dropdown populated from that DocType’s layout (label + fieldname)

  3. Upload an .svg file or paste SVG markup

cd ~/frappe-bench

bench get-app https://github.com/raisulislam0/section_icon.git

bench --site your-site install-app section_icon

bench --site your-site migrate

bench --site your-site clear-cache

bench build --app section_icon
3 Likes