diff --git a/frontend/src/app.tsx b/frontend/src/app.tsx
index 15aeccf..82c4ab9 100644
--- a/frontend/src/app.tsx
+++ b/frontend/src/app.tsx
@@ -192,8 +192,13 @@ function Dashboard({
               {group.items.map((link) => (
                 <li key={link.id}>
                   <a href={link.url} target="_blank" rel="noreferrer" className="link-row">
-                    <span className="link-name">{link.name}</span>
-                    <span className="link-description">{link.description || link.url}</span>
+                    <span className="link-icon" aria-hidden="true">
+                      {link.icon_url ? <img src={link.icon_url} alt="" className="link-icon-image" /> : <span>{link.name[0]}</span>}
+                    </span>
+                    <span className="min-w-0">
+                      <span className="link-name">{link.name}</span>
+                      <span className="link-description">{link.description || link.url}</span>
+                    </span>
                   </a>
                 </li>
               ))}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index e6aa245..28c135a 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -48,7 +48,15 @@ body {
 }
 
 .link-row {
-  @apply block rounded-md px-2 py-2 transition hover:bg-slate-800;
+  @apply flex items-center gap-3 rounded-md px-2 py-2 transition hover:bg-slate-800;
+}
+
+.link-icon {
+  @apply grid h-8 w-8 shrink-0 place-items-center overflow-hidden rounded-md border border-slate-700 bg-slate-900 text-xs font-semibold text-slate-300;
+}
+
+.link-icon-image {
+  @apply h-full w-full object-contain;
 }
 
 .link-name {