diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index 4b0e171e4..cc9c18815 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -102,39 +102,54 @@ const flairIconForLabel = (label: Label): JSX.Element | undefined => {
switch (label.name.toLocaleLowerCase()) {
case 'favorite':
return (
-
+
-
+
)
case 'pinned':
return (
-
+
-
+
)
case 'recommended':
return (
-
+
-
+
)
case 'newsletter':
return (
-
+
-
+
)
case 'rss':
case 'feed':
return (
-
+
-
+
)
}
return undefined
}
+type FlairIconProps = {
+ title: string
+ children: React.ReactNode
+}
+
+export function FlairIcon(
+ props: FlairIconProps
+): JSX.Element {
+ return (
+
+ {props.children}
+
+ )
+}
+
export const siteName = (
originalArticleUrl: string,
itemUrl: string,
@@ -171,7 +186,7 @@ export function LibraryItemMetadata(
}, [props.item.highlights])
return (
-
+
{props.item.labels?.map((label) => {
return flairIconForLabel(label)
})}