This sidebar menu includes icons for better visual navigation, suitable for modern web apps and admin dashboards.
HTML
<aside class="ss-sidebar">
<a href="javascript:void(0)">
<img src="https://unpkg.com/lucide-static@latest/icons/home.svg" alt="">
Home
</a>
<a href="javascript:void(0)">
<img src="https://unpkg.com/lucide-static@latest/icons/bar-chart-3.svg" alt="">
Analytics
</a>
<a href="javascript:void(0)">
<img src="https://unpkg.com/lucide-static@latest/icons/settings.svg" alt="">
Settings
</a>
</aside>CSS
.ss-sidebar{
display:grid;
gap:6px;
}
.ss-sidebar a{
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:10px;
text-decoration:none;
font-size:14px;
color:var(--sidebar-text);
}
.ss-sidebar img{
width:18px;
height:18px;
filter:var(--icon-filter);
}
:root{
--sidebar-text:#0f172a;
--icon-filter:none;
}
@media (prefers-color-scheme: dark){
:root{
--sidebar-text:#e5e7eb;
--icon-filter:invert(1);
}
}Notes
- Icon-enhanced UI
- Improves scannability
- Simple structure
- Works without icon libraries
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.