+
+
+ {filteredIcons.length === 0 ? (
+
+
+ ) : (
+ No icons found
+Try a different search term.
+
+ {filteredIcons.map(({ name, data }) => (
+
+
+ )}
+
+ )
+}
diff --git a/web/src/app/icons/components/icon-search.tsx b/web/src/app/icons/components/icon-search.tsx
new file mode 100644
index 00000000..35b83185
--- /dev/null
+++ b/web/src/app/icons/components/icon-search.tsx
@@ -0,0 +1,127 @@
+"use client"
+
+import { IconSubmissionContent } from "@/components/icon-submission-form"
+import { Input } from "@/components/ui/input"
+import { BASE_URL } from "@/constants"
+import type { IconSearchProps } from "@/types/icons"
+import { Search } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useCallback, useEffect, useRef, useState } from "react"
+
+export function IconSearch({ icons }: IconSearchProps) {
+ const searchParams = useSearchParams()
+ const initialQuery = searchParams.get("q")
+ const router = useRouter()
+ const pathname = usePathname()
+ const [searchQuery, setSearchQuery] = useState(initialQuery ?? "")
+ const timeoutRef = useRef
+
+ {name.replace(/-/g, " ")}
+
+ ))}
+
+
+
+ {filteredIcons.length === 0 ? (
+
+
+ ) : (
+
+
+ We don't have this one...yet!
+
+ {filteredIcons.map(({ name, data }) => (
+
+
+ )}
+
+ )
+}
diff --git a/web/src/app/icons/page.tsx b/web/src/app/icons/page.tsx
new file mode 100644
index 00000000..eb825316
--- /dev/null
+++ b/web/src/app/icons/page.tsx
@@ -0,0 +1,54 @@
+import { BASE_URL } from "@/constants"
+import { getIconsArray } from "@/lib/api"
+import type { Metadata } from "next"
+import { IconSearch } from "./components/icon-search"
+
+export const metadata: Metadata = {
+ title: "Browse icons | Dashboard Icons",
+ description: "Search and browse through our collection of beautiful dashboard icons for your applications",
+ keywords: ["dashboard icons", "browse icons", "icon search", "free icons", "open source icons"],
+ openGraph: {
+ title: "Browse Dashboard Icons Collection",
+ description: "Search and browse through our collection of beautiful dashboard icons for your applications",
+ type: "website",
+ url: `${BASE_URL}/icons`,
+ images: [
+ {
+ url: "/og-image-browse.png",
+ width: 1200,
+ height: 630,
+ alt: "Browse Dashboard Icons",
+ type: "image/png",
+ },
+ ],
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: "Browse Dashboard Icons Collection",
+ description: "Search and browse through our collection of beautiful dashboard icons for your applications",
+ images: ["/og-image-browse.png"],
+ },
+ alternates: {
+ canonical: `${BASE_URL}/icons`,
+ },
+}
+
+export const dynamic = "force-static"
+
+export default async function IconsPage() {
+ const icons = await getIconsArray()
+ return (
+
+
+ {name.replace(/-/g, " ")}
+
+ ))}
+
+
+ )
+}
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
new file mode 100644
index 00000000..a543b65f
--- /dev/null
+++ b/web/src/app/layout.tsx
@@ -0,0 +1,168 @@
+import { PostHogProvider } from "@/components/PostHogProvider"
+import { Header } from "@/components/header"
+import { LicenseNotice } from "@/components/license-notice"
+import type { Metadata, Viewport } from "next"
+import { Inter } from "next/font/google"
+import { Toaster } from "sonner"
+import "./globals.css"
+import { ThemeProvider } from "./theme-provider"
+
+const inter = Inter({
+ variable: "--font-inter",
+ subsets: ["latin"],
+})
+
+export const viewport: Viewport = {
+ width: "device-width",
+ initialScale: 1,
+ themeColor: "#ffffff",
+}
+
+export const metadata: Metadata = {
+ metadataBase: new URL("https://dashboardicons.com"),
+ title: "Dashboard Icons",
+ description: "Curated icons for your dashboard",
+ keywords: ["dashboard", "icons", "open source", "free icons", "dashboard design"],
+ robots: {
+ index: true,
+ follow: true,
+ "max-image-preview": "large",
+ "max-snippet": -1,
+ "max-video-preview": -1,
+ googleBot: "index, follow",
+ },
+ openGraph: {
+ siteName: "Dashboard Icons",
+ type: "website",
+ locale: "en_US",
+ title: "Dashboard Icons",
+ description: "Curated icons for your dashboard",
+ url: "https://dashboardicons.com",
+ images: [
+ {
+ url: "/og-image.png",
+ width: 1200,
+ height: 630,
+ alt: "Dashboard Icons",
+ type: "image/png",
+ },
+ ],
+ },
+ twitter: {
+ card: "summary_large_image",
+ site: "@homarr_app",
+ creator: "@homarr_app",
+ title: "Dashboard Icons",
+ description: "Curated icons for your dashboard",
+ images: ["/og-image.png"],
+ },
+ applicationName: "Dashboard Icons",
+ appleWebApp: {
+ title: "Dashboard Icons",
+ statusBarStyle: "default",
+ capable: true,
+ },
+ alternates: {
+ types: {
+ "application/rss+xml": "https://dashboardicons.com/rss.xml",
+ },
+ },
+ icons: {
+ icon: [
+ {
+ url: "/favicon.ico",
+ type: "image/x-icon",
+ },
+ {
+ url: "/favicon-16x16.png",
+ sizes: "16x16",
+ type: "image/png",
+ },
+ {
+ url: "/favicon-32x32.png",
+ sizes: "32x32",
+ type: "image/png",
+ },
+ {
+ url: "/favicon-96x96.png",
+ sizes: "96x96",
+ type: "image/png",
+ },
+ {
+ url: "/android-chrome-192x192.png",
+ sizes: "192x192",
+ type: "image/png",
+ },
+ ],
+ shortcut: [
+ {
+ url: "/favicon.ico",
+ type: "image/x-icon",
+ },
+ ],
+ apple: [
+ {
+ url: "/apple-icon-57x57.png",
+ sizes: "57x57",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-60x60.png",
+ sizes: "60x60",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-72x72.png",
+ sizes: "72x72",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-76x76.png",
+ sizes: "76x76",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-114x114.png",
+ sizes: "114x114",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-120x120.png",
+ sizes: "120x120",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-144x144.png",
+ sizes: "144x144",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-152x152.png",
+ sizes: "152x152",
+ type: "image/png",
+ },
+ {
+ url: "/apple-icon-180x180.png",
+ sizes: "180x180",
+ type: "image/png",
+ },
+ ],
+ },
+}
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+ return (
+
+
+
+
+
+
+
+
+
+ Browse icons
+Search through our collection of {icons.length} beautiful icons.
+
+
+ )
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
new file mode 100644
index 00000000..5dfc2bc8
--- /dev/null
+++ b/web/src/app/page.tsx
@@ -0,0 +1,43 @@
+import { HeroSection } from "@/components/hero"
+import { BASE_URL } from "@/constants"
+import { getTotalIcons } from "@/lib/api"
+import type { Metadata } from "next"
+
+export const metadata: Metadata = {
+ title: "Dashboard Icons - Beautiful icons for your dashboard",
+ description: "Free, open-source icons for your dashboard. Choose from hundreds of high-quality icons for your web applications.",
+ keywords: ["self hosted", "dashboard icons", "free icons", "open source icons", "web dashboard", "application icons"],
+ openGraph: {
+ title: "Dashboard Icons - Your definitive source for dashboard icons",
+ description: "Free, open-source icons for your dashboard. Choose from thousands of high-quality icons.",
+ type: "website",
+ url: BASE_URL,
+ images: [
+ {
+ url: "/og-image.png",
+ width: 1200,
+ height: 630,
+ alt: "Dashboard Icons",
+ },
+ ],
+ },
+ twitter: {
+ title: "Dashboard Icons - Your definitive source for dashboard icons",
+ description: "Free, open-source icons for your dashboard. Choose from thousands of high-quality icons.",
+ card: "summary_large_image",
+ images: ["/og-image.png"],
+ },
+ alternates: {
+ canonical: BASE_URL,
+ },
+}
+
+export default async function Home() {
+ const { totalIcons } = await getTotalIcons()
+
+ return (
+
+
+
+
+ Icon not found
+The icon you are looking for could not be found or there was an error loading it.
+If you believe this is an error, please contact the maintainers of the repository.
+
+
+
+
+
+ )
+}
diff --git a/web/src/app/sitemap.ts b/web/src/app/sitemap.ts
new file mode 100644
index 00000000..636b0ee8
--- /dev/null
+++ b/web/src/app/sitemap.ts
@@ -0,0 +1,36 @@
+import { BASE_URL, WEB_URL } from "@/constants"
+import { getAllIcons } from "@/lib/api"
+import type { MetadataRoute } from "next"
+
+export const dynamic = "force-static"
+
+export default async function sitemap(): Promise
+
+
+
+ )
+}
diff --git a/web/src/components/command-menu.tsx b/web/src/components/command-menu.tsx
new file mode 100644
index 00000000..ea698527
--- /dev/null
+++ b/web/src/components/command-menu.tsx
@@ -0,0 +1,90 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import * as React from "react"
+
+import { CommandDialog, CommandEmpty, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
+import Link from "next/link"
+
+interface CommandMenuProps {
+ icons: string[]
+}
+
+export function CommandMenu({ icons }: CommandMenuProps) {
+ const router = useRouter()
+ const [open, setOpen] = React.useState(false)
+ const [mounted, setMounted] = React.useState(false)
+ const [inputValue, setInputValue] = React.useState("")
+ const getFilteredIcons = React.useCallback(() => {
+ const query = inputValue.toLowerCase().trim()
+ if (!query) return icons.slice(0, 75)
+ return icons.filter((icon) => {
+ const iconName = icon.toLowerCase()
+ if (iconName.includes(query)) return true
+ const parts = query.split(/\s+/)
+ let lastIndex = -1
+ return parts.every((part) => {
+ const index = iconName.indexOf(part, lastIndex + 1)
+ if (index === -1) return false
+ lastIndex = index
+ return true
+ })
+ })
+ }, [icons, inputValue])
+
+ const filteredIcons = getFilteredIcons()
+
+ React.useEffect(() => {
+ setMounted(true)
+ }, [])
+ React.useEffect(() => {
+ const down = (e: KeyboardEvent) => {
+ if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+ e.preventDefault()
+ setOpen((open) => !open)
+ }
+ }
+
+ document.addEventListener("keydown", down)
+ return () => document.removeEventListener("keydown", down)
+ }, [])
+
+ const handleInputChange = React.useCallback((value: string) => {
+ setInputValue(value)
+ }, [])
+
+ const handleSelectIcon = React.useCallback(
+ (iconName: string) => {
+ router.push(`/icons/${iconName}`)
+ setOpen(false)
+ },
+ [router],
+ )
+ if (!mounted) return null
+
+ return (
+ <>
+ + Press{" "} + + ⌘K + {" "} + to search +
+
+ {/* Grid pattern */}
+
+
+
+
+ )
+}
diff --git a/web/src/components/header-nav.tsx b/web/src/components/header-nav.tsx
new file mode 100644
index 00000000..3402e324
--- /dev/null
+++ b/web/src/components/header-nav.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+export function HeaderNav() {
+ const pathname = usePathname()
+ const isIconsActive = pathname === "/icons" || pathname.startsWith("/icons/")
+
+ return (
+
+ )
+}
diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
new file mode 100644
index 00000000..c06f6ddb
--- /dev/null
+++ b/web/src/components/header.tsx
@@ -0,0 +1,33 @@
+import { IconSubmissionForm } from "@/components/icon-submission-form"
+import { ThemeSwitcher } from "@/components/theme-switcher"
+import { REPO_PATH } from "@/constants"
+import { getAllIcons } from "@/lib/api"
+import { Github } from "lucide-react"
+import Link from "next/link"
+import { CommandMenu } from "./command-menu"
+import { HeaderNav } from "./header-nav"
+
+const icons = await getAllIcons()
+
+export async function Header() {
+ return (
+
+
+
+
+ Dashboard Icons
+
+
+
+
+
+ 
+
+ {name}
+
+
+
+
+ )
+}
diff --git a/web/src/components/icon-details.tsx b/web/src/components/icon-details.tsx
new file mode 100644
index 00000000..294b98b4
--- /dev/null
+++ b/web/src/components/icon-details.tsx
@@ -0,0 +1,341 @@
+"use client"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { BASE_URL, REPO_PATH } from "@/constants"
+import type { AuthorData, Icon } from "@/types/icons"
+import { motion } from "framer-motion"
+import { Check, Copy, Download, Github } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { useState } from "react"
+import { toast } from "sonner"
+import { Carbon } from "./carbon"
+
+export type IconDetailsProps = {
+ icon: string
+ iconData: Icon
+ authorData: AuthorData
+}
+
+export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
+ const authorName = authorData.name || authorData.login || ""
+ const iconColorVariants = iconData.colors
+ const formattedDate = new Date(iconData.update.timestamp).toLocaleDateString("en-GB", {
+ day: "numeric",
+ month: "long",
+ year: "numeric",
+ })
+ const getAvailableFormats = () => {
+ switch (iconData.base) {
+ case "svg":
+ return ["svg", "png", "webp"]
+ case "png":
+ return ["png", "webp"]
+ default:
+ return [iconData.base]
+ }
+ }
+
+ const availableFormats = getAvailableFormats()
+ const [copiedVariants, setCopiedVariants] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Your definitive source for
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Your definitive source for
+
+
+
+ dashboard icons.
+
+
+ + A collection of {totalIcons} beautiful, clean and consistent icons for your dashboard, application, or website. +
+
+
+
+
+
+
+
+ handleCopy(url, variantKey)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Click to copy URL to clipboard
+{format.toUpperCase()}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Download icon
+Copy URL to clipboard
+View on GitHub
+
+
+ )
+}
diff --git a/web/src/components/icon-submission-form.tsx b/web/src/components/icon-submission-form.tsx
new file mode 100644
index 00000000..1e2a77b9
--- /dev/null
+++ b/web/src/components/icon-submission-form.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
+import { REPO_PATH } from "@/constants"
+import { DialogDescription } from "@radix-ui/react-dialog"
+import { ExternalLink, PlusCircle } from "lucide-react"
+import Link from "next/link"
+import { useState } from "react"
+
+export const ISSUE_TEMPLATES = [
+ {
+ id: "add_monochrome_icon",
+ name: "Add light & dark icon",
+ description: "Use this template to add a new icon to the project. Monochrome icons need both light and dark versions.",
+ url: `${REPO_PATH}/issues/new?template=add_monochrome_icon.yml`,
+ },
+ {
+ id: "add_normal_icon",
+ name: "Add normal icon",
+ description: "Use this template to add a new icon to the project. Normal icons work for both light and dark themes.",
+ url: `${REPO_PATH}/issues/new?template=add_normal_icon.yml`,
+ },
+ {
+ id: "update_monochrome_icon",
+ name: "Update light & dark icon",
+ description: "Use this template to update an existing icon. Monochrome icons need both light and dark versions.",
+ url: `${REPO_PATH}/issues/new?template=update_monochrome_icon.yml`,
+ },
+ {
+ id: "update_normal_icon",
+ name: "Update normal icon",
+ description: "Use this template to update an existing icon. Normal icons work for both light and dark themes.",
+ url: `${REPO_PATH}/issues/new?template=update_normal_icon.yml`,
+ },
+ {
+ id: "blank_issue",
+ name: "Something else",
+ description: "You'd like to do something else? Use this template to create a new issue.",
+ url: `${REPO_PATH}/issues/new?template=BLANK_ISSUE`,
+ },
+]
+export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
+ return (
+
+ {/* Left Column: Icon Info and Author */}
+
+
+
+
+
+
+
+
+
+
+ {/* Middle Column: Icon variants */}
+
+ {icon}
+
+
+
+
+
+
+
+
+ {iconData.categories && iconData.categories.length > 0 && (
+
+
+
+
+ + Updated on: {formattedDate} +
+
+
+
+
+ {authorName ? authorName.slice(0, 2).toUpperCase() : "??"}
+
+
+ {authorName}
+
+
+ By:
+
+
+ )}
+
+ {iconData.aliases && iconData.aliases.length > 0 && (
+ Categories
+
+ {iconData.categories.map((category) => (
+
+ {category}
+
+ ))}
+
+
+
+ )}
+ Aliases
+
+ {iconData.aliases.map((alias) => (
+
+ {alias}
+
+ ))}
+
+
+
+
+ Icon variants
+ Click on any icon to copy its URL to your clipboard
+
+
+ {!iconData.colors ? (
+
+
+
+
+ {/* Right Column: Technical details */}
+
+ {availableFormats.map((format) => renderVariant(format, icon))}
+
+ ) : (
+
+
+ )}
+
+
+ + + Light theme +
+
+ {availableFormats.map((format) => renderVariant(format, icon, "light"))}
+
+
+
+ + + Dark theme +
+
+ {availableFormats.map((format) => renderVariant(format, icon, "dark"))}
+
+
+
+
+ Technical details
+
+
+
+
+
+
+
+
+
+
+ Base format
+
+
+
+ {iconData.base.toUpperCase()}
+
+
+
+ {iconData.colors && (
+ Available formats
+
+ {availableFormats.map((format) => (
+
+
+ {format.toUpperCase()}
+
+ ))}
+
+
+ )}
+
+ Color variants
+
+ {Object.entries(iconData.colors).map(([theme, variant]) => (
+
+
+
+ {theme}:
+
+ ))}
+ {variant}
+
+
+ Source
+ +
+
+ )
+}
+export function IconSubmissionForm() {
+ const [open, setOpen] = useState(false)
+
+ return (
+
+ )
+}
diff --git a/web/src/components/license-notice.tsx b/web/src/components/license-notice.tsx
new file mode 100644
index 00000000..e333460a
--- /dev/null
+++ b/web/src/components/license-notice.tsx
@@ -0,0 +1,75 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { REPO_PATH } from "@/constants"
+import { AnimatePresence, motion } from "framer-motion"
+import { X } from "lucide-react"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+
+const LOCAL_STORAGE_KEY = "licenseNoticeDismissed"
+
+export function LicenseNotice() {
+ const [isVisible, setIsVisible] = useState(false)
+
+ useEffect(() => {
+ // Check local storage only on the client side
+ const dismissed = localStorage.getItem(LOCAL_STORAGE_KEY)
+ if (!dismissed) {
+ setIsVisible(true)
+ }
+ }, [])
+
+ const handleDismiss = () => {
+ localStorage.setItem(LOCAL_STORAGE_KEY, "true")
+ setIsVisible(false)
+ }
+
+ return (
+
+ {ISSUE_TEMPLATES.map((template) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ + Unless otherwise indicated, all images and assets are the property of their respective owners and used for identification + purposes only. +
++ Read the{" "} + + LICENSE + {" "} + or{" "} + + contact us + + . +
+{children}
+
+ {children}
+
+
+
+
+ )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel()
+
+ return (
+
+ )
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps
+
+ {children}
+
+
+