diff --git a/packages/web/components/elements/icons/FavoriteFlairIcon.tsx b/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
index ab7ab8386..9f2ec3b87 100644
--- a/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
+++ b/packages/web/components/elements/icons/FavoriteFlairIcon.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable functional/no-class */
 /* eslint-disable functional/no-this-expression */
+import { SpanBox } from '../LayoutPrimitives'
 import { IconProps } from './IconProps'
 
 import React from 'react'
diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index e7fd81c5a..a27570122 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -101,16 +101,36 @@ export const FLAIR_ICON_NAMES = [
 const flairIconForLabel = (label: Label): JSX.Element | undefined => {
   switch (label.name.toLocaleLowerCase()) {
     case 'favorite':
-      return <FavoriteFlairIcon />
+      return (
+        <SpanBox title="Favorite">
+          <FavoriteFlairIcon />
+        </SpanBox>
+      )
     case 'pinned':
-      return <PinnedFlairIcon />
+      return (
+        <SpanBox title="Pinned">
+          <PinnedFlairIcon />
+        </SpanBox>
+      )
     case 'recommended':
-      return <RecommendedFlairIcon />
+      return (
+        <SpanBox title="Recommended">
+          <RecommendedFlairIcon />
+        </SpanBox>
+      )
     case 'newsletter':
-      return <NewsletterFlairIcon />
+      return (
+        <SpanBox title="Newsletter">
+          <NewsletterFlairIcon />
+        </SpanBox>
+      )
     case 'rss':
     case 'feed':
-      return <FeedFlairIcon />
+      return (
+        <SpanBox title="Feed">
+          <FeedFlairIcon />
+        </SpanBox>
+      )
   }
   return undefined
 }