jamshalat-diary/hugeicons-migration-spec.md

HugeIcons Migration Spec

Scope

• Replace current Lucide icon usage with HugeIcons targets.
• Prioritize Islamic-context icons first (bottom nav, Beranda, Lainnya, Qibla, Qur'an entry points).
• Keep UI behavior unchanged; this spec is icon-only.

Inventory Summary (Current State)

• Total Lucide references: 158
• Unique Lucide symbols: 72
• Non-Lucid icon reference: Icons.arrow_back in quran_murattal_screen.dart

Top icon-heavy files:

1. lib/features/settings/presentation/settings_screen.dart
2. lib/features/dashboard/presentation/dashboard_screen.dart
3. lib/features/quran/presentation/quran_reading_screen.dart
4. lib/features/checklist/presentation/checklist_screen.dart
5. lib/features/tools/presentation/tools_screen.dart

Recommended HugeIcons Style Policy

• Stroke Rounded for navigation/system icons.
• Duotone Rounded for high-emphasis feature cards.
• Islamic-specific icons use explicit semantic slugs (Qur'an, Tasbih, Kaaba, Dua, Mosque).

Canonical Mapping (Lucide -> HugeIcons Candidate)

Notes:

• Confidence = how certain the target slug/semantic fit is.
• High means already validated semantically on HugeIcons.
• Medium means strong candidate but should be quickly verified in final implementation pass.

Lucide	HugeIcons candidate	Confidence	Notes
home	home-01-stroke-rounded	High	Bottom nav Beranda
calendar	calendar-01	High	Bottom nav Jadwal
bookOpen	quran-02-solid-sharp (feature), book-open-01-stroke-rounded (generic)	High	Use Qur'an variant where context is Qur'an
sparkles	tasbih (Dzikir), sparkles-family for generic	High/Medium	Dzikir should use Tasbih
wand2	magic-wand-01-duotone-rounded	High	Bottom nav Lainnya
listChecks	check-list	High	Ibadah list
barChart3	bar-chart-03-stroke-rounded	High	Laporan
headphones	headset-solid-rounded	Medium	Murattal/audio
compass	compass-duotone-rounded	High	Qibla entry/action
library	books-01-solid-standard	High	Hadits card
heart	dua-solid-sharp (Doa context), heart-family (generic)	High/Medium	Prefer Dua icon for Doa feature
mapPin	mosque-location (Qibla/location context), location-01 (generic)	High/Medium	Prefer mosque-location in Islamic context
locate	compass-duotone-rounded or location-focus-family	Medium	Qibla live-state
locateOff	location-off-family	Medium	Qibla sensor-off
bookmark	bookmark-02-stroke-rounded	Medium	Qur'an/bookmarks
pin	pin-location-family	Medium	Last read
search	search-01-stroke-rounded	Medium	Global search
refreshCw	refresh-family	Medium	Reload actions
settings	settings-02-stroke-rounded	Medium	Global settings
settings2	settings-02-stroke-rounded	Medium	Keep one settings variant
bell	notification-family	Medium	Notification
checkCircle2	checkmark-circle-family	Medium	Completion status
circle	circle-family	Medium	Unchecked state
check	tick-family	Medium	Confirmed state
chevronLeft	arrow-left-01-stroke-rounded	Medium	Back
chevronRight	arrow-right-01-stroke-rounded	Medium	Settings rows
chevronDown	arrow-down-01-stroke-rounded	Medium	Dropdown
chevronUp	arrow-up-01-stroke-rounded	Medium	Expand/collapse
arrowLeft	arrow-left-01-stroke-rounded	Medium	Back
arrowRight	arrow-right-01-stroke-rounded	Medium	Forward
clock	time-family	Medium	Prayer/meta time
sunrise	sunrise-family	Medium	Prayer icon
sun	sun-family	Medium	Prayer icon
cloudSun	cloud-sun-family	Medium	Prayer icon
sunset	sunset-family	Medium	Prayer icon
moon	moon-family	Medium	Prayer/night
volume2	volume-high-family	Medium	Audio toggle
user	user-03-stroke-rounded	Medium	Profile/author
quote	quote-family	Medium	Ayat quote panel
fingerprint	fingerprint-01	Medium	Dzikir tap counter
inbox	inbox-01	Medium	Empty state
wifiOff	wifi-off-01	Medium	Offline state
star	star-family	Medium	Ratings/highlight
building	mosque-01 (Islamic), building-family (generic)	Medium	Prefer mosque if religious place context
minusCircle	minus-sign-circle-family	Medium	Counter controls
plusCircle	plus-sign-circle-family	Medium	Counter controls
moonStar	moon-stars-family	Medium	Night checklist
trendingUp	chart-up-family	Medium	Trend KPI
history	history-family	Medium	Reports history
share2	share-family	Medium	Share action
play	play-family	Medium	Media
pause	pause-family	Medium	Media
stopCircle	stop-circle-family	Medium	Media/record stop
playCircle	play-circle-family	Medium	Media/record play
square	stop-square-family	Medium	Media
skipBack	skip-back-family	Medium	Media
skipForward	skip-forward-family	Medium	Media
shuffle	shuffle-family	Medium	Media
listMusic	playlist-family	Medium	Media list
music	music-note-family	Medium	Media indicator
brain	brain-family	Medium	Hafalan mode
gem	diamond/gem-family	Medium	Highlight badge
flag	flag-family	Medium	Marker
trash2	delete-family	Medium	Remove bookmark
layoutDashboard	dashboard-square-family	Medium	Settings
timer	timer-family	Medium	Timing settings
type	text-family	Medium	Typography settings
vibrate	vibration-family	Medium	Haptic settings
pencil	edit-family	Medium	Edit profile
info	information-circle-family	Medium	Info
logOut	logout-01-family	Medium	Logout
languages	language-family	Medium	Qur'an enrichment language

Screen-Level Migration Targets

P0: Bottom Navigation

File: lib/core/widgets/bottom_nav_bar.dart

• home -> home-01-stroke-rounded
• calendar -> calendar-01
• bookOpen -> quran-02-solid-sharp
• sparkles -> tasbih
• wand2 -> magic-wand-01-duotone-rounded
• listChecks -> check-list
• barChart3 -> bar-chart-03-stroke-rounded

P0: Beranda Quick Access + Header Context

File: lib/features/dashboard/presentation/dashboard_screen.dart

• Qur'an card: bookOpen -> quran-02-solid-sharp
• Murattal: headphones -> headset-solid-rounded
• Dzikir: sparkles -> tasbih
• Doa: heart -> dua-solid-sharp
• Hadits: library -> books-01-solid-standard
• Qibla button/location: compass/mapPin -> compass-duotone-rounded + mosque-location
• Prayer state icons (sunrise/sun/cloudSun/sunset/moon) -> matching HugeIcons weather/time family

P0: Lainnya (Tools)

File: lib/features/tools/presentation/tools_screen.dart

• Same feature mapping as Beranda quick access.
• App-bar/system icons remain generic HugeIcons stroke-rounded (bell, settings, share).

P0: Qibla Screen

File: lib/features/qibla/presentation/qibla_screen.dart

• Back: arrowLeft -> arrow-left-01-stroke-rounded
• Live state: locate/locateOff -> location-focus/location-off family
• Location marker: mapPin -> mosque-location (preferred) or location-01

P1: Qur'an, Dzikir, Doa, Hadits

• Qur'an family files: prioritize Qur'an/bookmark/media semantics.
• Dzikir screen: fingerprint may remain if preferred UX metaphor; alternative tasbih for stronger Islamic tone.
• Doa/Hadits list screens: keep simple system icon replacements for search, refresh.

P2: Settings / Checklist / Laporan

• Mostly generic system icons; migrate to HugeIcons equivalents with minimal semantic risk.

Proposed Implementation Contract

1. Introduce wrapper layer (single source of truth): lib/app/icons/app_icons.dart
2. Keep semantic names stable in app code (AppIcons.quran, AppIcons.dzikir, AppIcons.qibla, etc.).
3. Map AppIcons.* to HugeIcons package symbols.
4. Perform migration by feature slices (P0 -> P2), with visual QA after each slice.

QA Checklist

• Bottom nav recognizability retained at 24dp.
• Active/inactive contrast unchanged.
• No icon clipping at 20/24dp sizes.
• Islamic features feel more explicit (Qur'an, Dzikir, Doa, Qibla).
• Dark/light mode visual consistency maintained.

Reference Links (HugeIcons)

• https://hugeicons.com/icon/quran-02-solid-sharp
• https://hugeicons.com/icon/tasbih
• https://hugeicons.com/icon/mosque-location
• https://hugeicons.com/icon/kaaba-01-stroke-standard
• https://hugeicons.com/icon/dua-solid-sharp
• https://hugeicons.com/icon/books-01-solid-standard
• https://hugeicons.com/icon/home-01-stroke-rounded
• https://hugeicons.com/icon/calendar-01
• https://hugeicons.com/icon/check-list
• https://hugeicons.com/icon/magic-wand-01-duotone-rounded
• https://hugeicons.com/icon/bar-chart-03-stroke-rounded
• https://hugeicons.com/icon/compass-duotone-rounded
• https://hugeicons.com/icon/headset-solid-rounded