Skip to content

[UI] - Updates all Icons to Phosphor Icons #1066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
madster456 merged 11 commits into from
Dec 22, 2025
Merged

[UI] - Updates all Icons to Phosphor Icons #1066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
0711392
Update all icons to phosphor and remove lucide
madster456 Dec 15, 2025
378ebc3
update transactions table
madster456 Dec 15, 2025
3aa0a2f
Update imports
madster456 Dec 15, 2025
bf1e747
Merge branch 'dev' into ui/icons
madster456 Dec 16, 2025
8fd2781
Merge branch 'dev' into ui/icons
madster456 Dec 17, 2025
f809452
lint fix
madster456 Dec 17, 2025
49488a7
merge dev, resolve conflicts, update new icons
madster456 Dec 21, 2025
0aea497
Update newly added icons to phosphor
madster456 Dec 22, 2025
065ccd4
update stray icon, and add import back
madster456 Dec 22, 2025
a99c372
Not using SSR import since use-client
madster456 Dec 22, 2025
3abdb4f
Merge branch 'dev' into ui/icons
madster456 Dec 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion apps/dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,6 @@
"input-otp": "^1.4.1",
"jose": "^5.2.2",
"lodash": "^4.17.21",
"lucide-react": "^0.508.0",
"next": "16.0.9",
"next-themes": "^0.2.1",
"posthog-js": "^1.235.0",
Expand Down
6 changes: 3 additions & 3 deletions apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
import { ProjectCard } from "@/components/project-card";
import { useRouter } from "@/components/router";
import { SearchBar } from "@/components/search-bar";
import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Skeleton, Typography, toast } from "@/components/ui";
import { GearIcon } from "@phosphor-icons/react";
import { AdminOwnedProject, Team, useUser } from "@stackframe/stack";
import { strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
import { groupBy } from "@stackframe/stack-shared/dist/utils/arrays";
import { runAsynchronously, wait } from "@stackframe/stack-shared/dist/utils/promises";
import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue, Skeleton, Typography, toast } from "@/components/ui";
import { Settings } from "lucide-react";
import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
import * as yup from "yup";
import { inviteUser, listInvitations, revokeInvitation } from "./actions";
Expand Down Expand Up @@ -135,7 +135,7 @@ function TeamAddUserDialog(props: { team: Team }) {
title={`Invite teammates to ${props.team.displayName}`}
onClick={() => setOpen(true)}
>
<Settings className="h-4 w-4" />
<GearIcon className="h-4 w-4" />
</Button>

<Dialog open={open} onOpenChange={setOpen}>
Expand Down
4 changes: 2 additions & 2 deletions apps/dashboard/src/app/(main)/(protected)/projects/-selector-/[...path]/page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

import { ProjectAvatar } from "@/components/project-switcher";
import { useRouter } from "@/components/router";
import { useUser } from "@stackframe/stack";
import {
Button,
Card,
Expand All @@ -16,7 +15,8 @@ import {
SelectTrigger,
SelectValue
} from "@/components/ui";
import { PlusIcon } from "lucide-react";
import { PlusIcon } from "@phosphor-icons/react";
import { useUser } from "@stackframe/stack";
import { useEffect, useState } from "react";

export function ProjectSelectorPageClient(props: { deepPath: string }) {
Expand Down
4 changes: 2 additions & 2 deletions .../dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
'use client';

import { Card, CardContent, cn } from '@/components/ui';
import { Loader2 } from 'lucide-react';
import { CircleNotchIcon } from '@phosphor-icons/react';

export function MetricsLoadingFallback({ className }: { className?: string }) {
return (
<Card className={cn("w-full", className)}>
<CardContent className="flex flex-col items-center justify-center py-12 space-y-4">
<Loader2 className="h-8 w-8 animate-spin text-primary" />
<CircleNotchIcon className="h-8 w-8 animate-spin text-primary" />
<div className="text-center space-y-1">
<p className="text-lg font-medium">Recalculating metrics...</p>
<p className="text-sm text-muted-foreground">Please check back later</p>
Expand Down
18 changes: 9 additions & 9 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/metrics-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
import { AppIcon } from "@/components/app-square";
import { Link } from "@/components/link";
import { useRouter } from "@/components/router";
import { cn, Typography } from '@/components/ui';
import { ALL_APPS_FRONTEND, getAppPath } from "@/lib/apps-frontend";
import { CaretUpIcon, CompassIcon, DotsThreeIcon, GlobeIcon, SquaresFourIcon } from "@phosphor-icons/react";
import useResizeObserver from '@react-hook/resize-observer';
import { useUser } from '@stackframe/stack';
import { ALL_APPS, type AppId } from "@stackframe/stack-shared/dist/apps/apps-config";
import { typedEntries } from "@stackframe/stack-shared/dist/utils/objects";
import { cn, Typography } from '@/components/ui';
import { ChevronUp, Compass, Globe2, LayoutGrid, MoreHorizontal } from "lucide-react";
import { Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { PageLayout } from "../page-layout";
import { useAdminApp, useProjectId } from '../use-admin-app';
Expand Down Expand Up @@ -160,7 +160,7 @@ function AppsWidget({ installedApps, projectId }: { installedApps: AppId[], proj
<div className="shrink-0">
<div className="flex items-center gap-2 mb-4">
<div className="p-1.5 rounded-lg bg-foreground/[0.04]">
<LayoutGrid className="h-3.5 w-3.5" />
<SquaresFourIcon className="h-3.5 w-3.5" />
</div>
<span className="text-xs font-semibold text-foreground uppercase tracking-wider">
Quick Access
Expand Down Expand Up @@ -212,7 +212,7 @@ function AppsWidget({ installedApps, projectId }: { installedApps: AppId[], proj
>
<div className="relative transition-transform duration-750 group-hover:transition-none group-hover:scale-105">
<div className="flex items-center justify-center w-[72px] h-[72px]">
<Compass className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
<CompassIcon className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
</div>
</div>
<span className="text-[11px] font-medium text-center text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none leading-tight w-full">
Expand All @@ -227,7 +227,7 @@ function AppsWidget({ installedApps, projectId }: { installedApps: AppId[], proj
>
<div className="relative transition-transform duration-750 group-hover:transition-none group-hover:scale-105">
<div className="flex items-center justify-center w-[72px] h-[72px]">
<MoreHorizontal className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
<DotsThreeIcon className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
</div>
</div>
<span className="text-[11px] font-medium text-center text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none leading-tight w-full">
Expand All @@ -243,7 +243,7 @@ function AppsWidget({ installedApps, projectId }: { installedApps: AppId[], proj
>
<div className="relative transition-transform duration-750 group-hover:transition-none group-hover:scale-105">
<div className="flex items-center justify-center w-[72px] h-[72px]">
<ChevronUp className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
<CaretUpIcon className="w-[30px] h-[30px] text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none" />
</div>
</div>
<span className="text-[11px] font-medium text-center text-muted-foreground group-hover:text-foreground transition-colors duration-750 group-hover:transition-none truncate leading-tight w-full">
Expand Down Expand Up @@ -510,7 +510,7 @@ function MetricsContent({
<div className="absolute top-0 left-0 px-1 z-10">
<div className="flex items-center gap-2 mb-2">
<div className="p-1.5 rounded-lg bg-foreground/[0.04]">
<Globe2 className="h-3.5 w-3.5 text-muted-foreground" />
<GlobeIcon className="h-3.5 w-3.5 text-muted-foreground" />
</div>
<span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
Total Users
Expand Down Expand Up @@ -570,7 +570,7 @@ function MetricsContent({
<div className="flex-1 flex items-center justify-center min-h-[300px]">
<div className="text-center p-10">
<div className="p-3 rounded-2xl bg-foreground/[0.03] w-fit mx-auto mb-4">
<LayoutGrid className="h-8 w-8 text-muted-foreground/40" />
<SquaresFourIcon className="h-8 w-8 text-muted-foreground/40" />
</div>
<Typography variant="secondary" className="text-sm">
No widgets enabled
Expand All @@ -585,7 +585,7 @@ function MetricsContent({
{showGlobe && (
<div className="lg:hidden mt-5 p-4 rounded-2xl bg-foreground/[0.02] ring-1 ring-foreground/[0.05] text-center">
<Typography variant="secondary" className="text-xs">
<Globe2 className="h-3.5 w-3.5 inline-block mr-1.5 -mt-0.5" />
<GlobeIcon className="h-3.5 w-3.5 inline-block mr-1.5 -mt-0.5" />
Globe visualization is available on larger screens
</Typography>
</div>
Expand Down
8 changes: 4 additions & 4 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { CodeBlock } from '@/components/code-block';
import { APIEnvKeys, NextJsEnvKeys } from '@/components/env-keys';
import { InlineCode } from '@/components/inline-code';
import { StyledLink } from '@/components/link';
import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from "@/components/ui";
import { useThemeWatcher } from '@/lib/theme';
import { BookIcon, XIcon } from "@phosphor-icons/react";
import { use } from "@stackframe/stack-shared/dist/utils/react";
import { deindent } from '@stackframe/stack-shared/dist/utils/strings';
import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Typography, cn } from "@/components/ui";
import { Book, X } from "lucide-react";
import dynamic from "next/dynamic";
import Image from 'next/image';
import { Suspense, useRef, useState } from "react";
Expand Down Expand Up @@ -425,7 +425,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
<div className="flex justify-end">
<Button variant='plain' onClick={props.toMetrics}>
Close Setup
<X className="w-4 h-4 ml-1 mt-0.5" />
<XIcon className="w-4 h-4 ml-1 mt-0.5" />
</Button>
</div>
<div className="flex gap-4 justify-center items-center border rounded-2xl py-4 px-8 backdrop-blur-md bg-slate-200/20 dark:bg-black/20">
Expand All @@ -450,7 +450,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
window.open('https://docs.stack-auth.com/', '_blank');
}}
>
<Book className="w-4 h-4 mr-2" />
<BookIcon className="w-4 h-4 mr-2" />
Full Documentation
</Button>
</Typography>
Expand Down
12 changes: 6 additions & 6 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/apps/page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@

import { useAdminApp } from "@/app/(main)/(protected)/projects/[projectId]/use-admin-app";
import { AppSquare } from "@/components/app-square";
import { cn } from "@/components/ui";
import { type AppId } from "@/lib/apps-frontend";
import { CheckCircleIcon, MagnifyingGlassIcon, SquaresFourIcon } from "@phosphor-icons/react";
import { ALL_APPS } from "@stackframe/stack-shared/dist/apps/apps-config";
import { stringCompare } from "@stackframe/stack-shared/dist/utils/strings";
import { cn } from "@/components/ui";
import { CheckCircle2, LayoutGrid, Search } from "lucide-react";
import { useMemo, useState } from "react";
import { PageLayout } from "../page-layout";

Expand Down Expand Up @@ -107,7 +107,7 @@ export default function PageClient() {
{/* Header Section */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-2">
<LayoutGrid className="h-8 w-8 text-blue-600 dark:text-blue-400" />
<SquaresFourIcon className="h-8 w-8 text-blue-600 dark:text-blue-400" />
<h1 className="text-3xl font-semibold text-gray-900 dark:text-gray-100">
Apps
</h1>
Expand All @@ -120,7 +120,7 @@ export default function PageClient() {
{/* Search and Stats Bar */}
<div className="flex flex-col sm:flex-row gap-4 mb-6">
<div className="relative flex-1 max-w-md">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
<input
type="text"
placeholder="Search apps..."
Expand All @@ -141,7 +141,7 @@ export default function PageClient() {

{installedApps.length > 0 && (
<div className="flex items-center gap-2 px-4 py-2.5 bg-green-50 dark:bg-green-950/30 rounded-xl border border-green-200 dark:border-green-900">
<CheckCircle2 className="h-4 w-4 text-green-600 dark:text-green-400" />
<CheckCircleIcon className="h-4 w-4 text-green-600 dark:text-green-400" />
<span className="text-sm font-medium text-green-800 dark:text-green-300">
{installedApps.length} app{installedApps.length !== 1 ? 's' : ''} installed
</span>
Expand Down Expand Up @@ -201,7 +201,7 @@ export default function PageClient() {
) : (
<div className="flex flex-col items-center justify-center py-16 text-center">
<div className="w-16 h-16 mb-4 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
<Search className="h-8 w-8 text-gray-400" />
<MagnifyingGlassIcon className="h-8 w-8 text-gray-400" />
</div>
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-1">
No apps found
Expand Down
14 changes: 7 additions & 7 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/page-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
"use client";

import { SettingCard, SettingSelect, SettingSwitch } from "@/components/settings";
import { ActionDialog, Badge, BrandIcons, BrowserFrame, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, SelectItem, SimpleTooltip, Typography } from "@/components/ui";
import { AsteriskIcon, DotsThreeIcon, KeyIcon, LinkIcon, PlusCircleIcon } from "@phosphor-icons/react";
import { AdminOAuthProviderConfig, AuthPage, OAuthProviderConfig } from "@stackframe/stack";
import { allProviders } from "@stackframe/stack-shared/dist/utils/oauth";
import { ActionDialog, Badge, BrandIcons, BrowserFrame, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, SelectItem, SimpleTooltip, Typography } from "@/components/ui";
import { AsteriskSquare, CirclePlus, Key, Link2, MoreHorizontal } from "lucide-react";
import { useState } from "react";
import { CardSubtitle } from "../../../../../../../../../packages/stack-ui/dist/components/ui/card";
import { AppEnabledGuard } from "../app-enabled-guard";
Expand Down Expand Up @@ -181,7 +181,7 @@ function OAuthActionCell({ config }: { config: AdminOAuthProviderConfig }) {
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="h-8 w-8 p-0">
<span className="sr-only">Open menu</span>
<MoreHorizontal className="h-4 w-4" />
<DotsThreeIcon className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
Expand Down Expand Up @@ -221,7 +221,7 @@ export default function PageClient() {
<SettingSwitch
label={
<div className="flex items-center gap-2">
<AsteriskSquare size={20} aria-hidden="true" />
<AsteriskIcon size={20} aria-hidden="true" />
<span>Email/password authentication</span>
</div>
}
Expand All @@ -237,7 +237,7 @@ export default function PageClient() {
<SettingSwitch
label={
<div className="flex items-center gap-2">
<Link2 size={20} />
<LinkIcon size={20} />
<span>Magic link (Email OTP)</span>
</div>
}
Expand All @@ -253,7 +253,7 @@ export default function PageClient() {
<SettingSwitch
label={
<div className="flex items-center gap-2">
<Key size={20} />
<KeyIcon size={20} />
<span>Passkey</span>
</div>
}
Expand Down Expand Up @@ -292,7 +292,7 @@ export default function PageClient() {
}}
variant="secondary"
>
<CirclePlus size={16}/>
<PlusCircleIcon size={16}/>
<span className="ml-2">Add SSO providers</span>
</Button>
<DisabledProvidersDialog
Expand Down
4 changes: 2 additions & 2 deletions apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/auth-methods/providers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { FormDialog } from "@/components/form-dialog";
import { InputField, SwitchField } from "@/components/form-fields";
import { Link } from "@/components/link";
import { getPublicEnvVar } from '@/lib/env';
import { ArrowRightIcon } from "@phosphor-icons/react";
import { AdminProject } from "@stackframe/stack";
import { yupBoolean, yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
import { sharedProviders } from "@stackframe/stack-shared/dist/utils/oauth";
import { ActionDialog, Badge, BrandIcons, InlineCode, Label, SimpleTooltip, Typography, buttonVariants, cn } from "@/components/ui";
import clsx from "clsx";
import { ArrowRight } from "lucide-react";
import { useState } from "react";
import * as yup from "yup";

Expand Down Expand Up @@ -181,7 +181,7 @@ export function ProviderSettingDialog(props: Props & { open: boolean, onClose: (
target="_blank"
>
See full documentation
<ArrowRight size={16} />
<ArrowRightIcon size={16} />
</Link>

</>
Expand Down
Loading