diff --git a/web/src/app/error.tsx b/web/src/app/error.tsx index 3b332632..8c7660fc 100644 --- a/web/src/app/error.tsx +++ b/web/src/app/error.tsx @@ -32,16 +32,16 @@ export default function ErrorPage({

Something went wrong

- An unexpected error occurred while loading this page. We've been notified and are looking into it. + Unable to load this page. We're looking into the issue.

{error.digest &&

Error ID: {error.digest}

} diff --git a/web/src/app/icons/[icon]/page.tsx b/web/src/app/icons/[icon]/page.tsx index 186ca02f..ca00e909 100644 --- a/web/src/app/icons/[icon]/page.tsx +++ b/web/src/app/icons/[icon]/page.tsx @@ -42,7 +42,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent: return { title: `${formattedIconName} Icon | Dashboard Icons`, - description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`, + description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`, assets: [iconImageUrl], category: "icons", keywords: [ @@ -57,14 +57,14 @@ export async function generateMetadata({ params, searchParams }: Props, parent: icons: { icon: iconImageUrl, }, - abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`, + abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`, robots: { index: true, follow: true, }, openGraph: { title: `${formattedIconName} Icon | Dashboard Icons`, - description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`, + description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`, type: "article", url: pageUrl, authors: [authorName], @@ -76,7 +76,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent: twitter: { card: "summary_large_image", title: `${formattedIconName} Icon | Dashboard Icons`, - description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`, + description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`, images: [iconImageUrl], }, alternates: { diff --git a/web/src/app/icons/components/icon-search.tsx b/web/src/app/icons/components/icon-search.tsx index 8639a582..6b42f363 100644 --- a/web/src/app/icons/components/icon-search.tsx +++ b/web/src/app/icons/components/icon-search.tsx @@ -228,11 +228,11 @@ export function IconSearch({ icons }: IconSearchProps) { const getSortLabel = (sort: SortOption) => { switch (sort) { case "relevance": - return "Best match" + return "Relevance" case "alphabetical-asc": - return "A to Z" + return "Name (A-Z)" case "alphabetical-desc": - return "Z to A" + return "Name (Z-A)" case "newest": return "Newest first" default: @@ -265,7 +265,7 @@ export function IconSearch({ icons }: IconSearchProps) { handleSearch(e.target.value)} @@ -279,7 +279,7 @@ export function IconSearch({ icons }: IconSearchProps) { - Categories + Select Categories
@@ -314,7 +314,7 @@ export function IconSearch({ icons }: IconSearchProps) { }} className="cursor-pointer focus: focus:bg-rose-50 dark:focus:bg-rose-950/20" > - Clear all filters + Clear categories )} @@ -330,18 +330,18 @@ export function IconSearch({ icons }: IconSearchProps) { - Sort By + Sort Icons handleSortChange(value as SortOption)}> - Best match + Relevance - A to Z + Name (A-Z) - Z to A + Name (Z-A) @@ -355,7 +355,7 @@ export function IconSearch({ icons }: IconSearchProps) { {(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && ( )}
@@ -363,7 +363,7 @@ export function IconSearch({ icons }: IconSearchProps) { {/* Active filter badges */} {selectedCategories.length > 0 && (
- Filters: + Selected:
{selectedCategories.map((category) => ( @@ -389,7 +389,7 @@ export function IconSearch({ icons }: IconSearchProps) { }} className="text-xs h-7 px-2 cursor-pointer" > - Clear all + Clear
)} @@ -400,34 +400,39 @@ export function IconSearch({ icons }: IconSearchProps) { {filteredIcons.length === 0 ? (
-

We don't have this one...yet!

+

Icon not found

+

Help us expand our collection

+
+
+ +
+ Need help? + +
- -
) : ( <>

- Found {filteredIcons.length} icon - {filteredIcons.length !== 1 ? "s" : ""}. + {filteredIcons.length} {filteredIcons.length === 1 ? "icon" : "icons"} found

{getSortIcon(sortOption)} @@ -445,11 +450,9 @@ export function IconSearch({ icons }: IconSearchProps) { function IconCard({ name, data: iconData, - matchedAlias, }: { name: string data: Icon - matchedAlias?: string | null }) { return ( @@ -465,8 +468,6 @@ function IconCard({ {name.replace(/-/g, " ")} - - {matchedAlias && Alias: {matchedAlias}} ) @@ -482,10 +483,10 @@ function IconsGrid({ filteredIcons, matchedAliases }: IconsGridProps) { <>
{filteredIcons.slice(0, 120).map(({ name, data }) => ( - + ))}
- {filteredIcons.length > 120 &&

And {filteredIcons.length - 120} more...

} + {filteredIcons.length > 120 &&

{filteredIcons.length - 120} more icons available

} ) } diff --git a/web/src/app/icons/page.tsx b/web/src/app/icons/page.tsx index a218be25..ddd06cea 100644 --- a/web/src/app/icons/page.tsx +++ b/web/src/app/icons/page.tsx @@ -9,7 +9,7 @@ export async function generateMetadata(): Promise { return { title: "Browse Icons | Free Dashboard Icons", - description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`, + description: `Browse our collection of ${totalIcons} icons for dashboards and applications. Available in SVG, PNG, and WEBP formats.`, keywords: [ "browse icons", "dashboard icons", @@ -22,7 +22,7 @@ export async function generateMetadata(): Promise { ], openGraph: { title: "Browse Icons | Free Dashboard Icons", - description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`, + description: `Browse our collection of ${totalIcons} icons for dashboards and applications. Available in SVG, PNG, and WEBP formats.`, type: "website", url: `${BASE_URL}/icons`, images: [ @@ -38,7 +38,7 @@ export async function generateMetadata(): Promise { twitter: { card: "summary_large_image", title: "Browse Icons | Free Dashboard Icons", - description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`, + description: `Browse our collection of ${totalIcons} icons for dashboards and applications. Available in SVG, PNG, and WEBP formats.`, images: ["/og-image-browse.png"], }, alternates: { @@ -57,8 +57,8 @@ export default async function IconsPage() {
-

Browse icons

-

Search through our collection of {icons.length} beautiful icons.

+

Icons

+

Search our collection of {icons.length} icons.

diff --git a/web/src/app/not-found.tsx b/web/src/app/not-found.tsx index 08f18a5a..5f1f115a 100644 --- a/web/src/app/not-found.tsx +++ b/web/src/app/not-found.tsx @@ -15,9 +15,9 @@ export default function NotFound({
-

Icon not found

+

Not found

- The icon you are looking for could not be found or there was an error loading it. + This icon does not exist or could not be loaded.

@@ -25,16 +25,16 @@ export default function NotFound({
-

Can't find what you're looking for?

+

Missing an icon?

- Contribute to our icon collection by suggesting a new icon or improving an existing one. + Submit a new icon or suggest improvements to our collection.

diff --git a/web/src/components/footer.tsx b/web/src/components/footer.tsx index 251394d3..2395d748 100644 --- a/web/src/components/footer.tsx +++ b/web/src/components/footer.tsx @@ -37,7 +37,7 @@ export function Footer() {

Dashboard Icons

- A collection of curated icons for services, applications and tools, designed specifically for dashboards and app directories. + Collection of icons for applications, services, and tools - designed for dashboards and app directories.

diff --git a/web/src/components/hero.tsx b/web/src/components/hero.tsx index 5117a002..a46fd1da 100644 --- a/web/src/components/hero.tsx +++ b/web/src/components/hero.tsx @@ -209,9 +209,57 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:

Your definitive source for - + + + + +
- + + + + + dashboard icons

@@ -224,7 +272,7 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
- Explore icons + Browse icons @@ -449,12 +497,12 @@ export function GiveUsMoneyButton() {
@@ -478,7 +526,7 @@ function SearchInput({ searchQuery, setSearchQuery, totalIcons }: SearchInputPro name="q" autoFocus type="search" - placeholder={`Find any of ${totalIcons} icons by name or category...`} + placeholder={`Search from ${totalIcons} icons...`} className="pl-10 h-10 md:h-12 rounded-lg w-full border-border focus:border-primary/20 text-sm md:text-base" value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} diff --git a/web/src/components/icon-details.tsx b/web/src/components/icon-details.tsx index 28cda419..58e66b08 100644 --- a/web/src/components/icon-details.tsx +++ b/web/src/components/icon-details.tsx @@ -347,16 +347,14 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {

About this icon

- Available in{" "} - {availableFormats.length > 1 - ? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")})` - : `${availableFormats[0].toUpperCase()} format`}{" "} + Available in {availableFormats.length > 1 + ? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")}) ` + : `${availableFormats[0].toUpperCase()} format `} with a base format of {iconData.base.toUpperCase()}. {iconData.colors && " Includes both light and dark theme variants for better integration with different UI designs."}

- Use the {icon} icon in your web applications, dashboards, or documentation to enhance visual communication and user - experience. + Perfect for adding to dashboards, app directories, documentation, or anywhere you need the {icon.replace(/-/g, " ")} logo.

diff --git a/web/src/components/icon-submission-form.tsx b/web/src/components/icon-submission-form.tsx index b0f365e3..2559923c 100644 --- a/web/src/components/icon-submission-form.tsx +++ b/web/src/components/icon-submission-form.tsx @@ -11,32 +11,32 @@ import { useState } from "react" export const ISSUE_TEMPLATES = [ { id: "add_monochrome_icon", - name: "Add light & dark icon", - description: "Submit a new icon with both light and dark versions for optimal theme compatibility.", + name: "Add light/dark icon", + description: "Submit a new icon with light and dark versions.", url: `${REPO_PATH}/issues/new?template=add_monochrome_icon.yml`, }, { id: "add_normal_icon", - name: "Add normal icon", - description: "Submit a new icon that works well across both light and dark themes.", + name: "Add standard icon", + description: "Submit a new icon for both themes.", url: `${REPO_PATH}/issues/new?template=add_normal_icon.yml`, }, { id: "update_monochrome_icon", - name: "Update light & dark icon", - description: "Improve an existing icon by updating both light and dark versions.", + name: "Update light/dark icon", + description: "Improve an existing light/dark icon.", url: `${REPO_PATH}/issues/new?template=update_monochrome_icon.yml`, }, { id: "update_normal_icon", - name: "Update normal icon", - description: "Improve an existing icon that works across both light and dark themes.", + name: "Update standard icon", + description: "Improve an existing standard icon.", url: `${REPO_PATH}/issues/new?template=update_normal_icon.yml`, }, { id: "blank_issue", - name: "Something else", - description: "Create a custom issue for other suggestions, bug reports, or improvements.", + name: "Other request", + description: "Submit another type of request.", url: `${REPO_PATH}/issues/new?template=BLANK_ISSUE`, }, ] @@ -73,13 +73,13 @@ export function IconSubmissionForm() { - Contribute a new icon - Choose a template below to suggest a new icon or improve an existing one. + Submit an icon + Select an option below to submit or update an icon.
setOpen(false)} /> diff --git a/web/src/components/recently-added-icons.tsx b/web/src/components/recently-added-icons.tsx index dc765f4a..5fd94662 100644 --- a/web/src/components/recently-added-icons.tsx +++ b/web/src/components/recently-added-icons.tsx @@ -61,7 +61,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) { href="/icons" className="font-medium inline-flex items-center py-2 px-4 rounded-full border transition-all duration-200 group hover-lift soft-shadow" > - View complete collection + View all icons
diff --git a/web/src/constants.ts b/web/src/constants.ts index 56f09708..acb3d62b 100644 --- a/web/src/constants.ts +++ b/web/src/constants.ts @@ -5,6 +5,6 @@ export const WEB_URL = "https://dashboardicons.com" export const REPO_NAME = "homarr-labs/dashboard-icons" export const getDescription = (totalIcons: number) => - `A collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.` + `Collection of ${totalIcons} icons for applications, services, and tools - designed for dashboards and app directories.` export const websiteTitle = "Free Dashboard Icons - Download High-Quality UI & App Icons"