Refactor icons to use fill="variant" prop instead of a separate icon

apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/fraud/review-fraud-alert-sheet.tsx

@@ -23,7 +23,7 @@ import {
   Tooltip,
   useTable,
 } from "@dub/ui";
-import { BadgeCheck2Fill, Xmark } from "@dub/ui/icons";
+import { BadgeCheck2, Xmark } from "@dub/ui/icons";
 import {
   cn,
   COUNTRIES,
@@ -255,7 +255,7 @@ function SheetContent({
                                 <Icon className="size-3 shrink-0" />
                                 <span>{value}</span>
                                 {verified && (
-                                  <BadgeCheck2Fill className="size-3 text-green-600" />
+                                  <BadgeCheck2 variant="fill" className="size-3 text-green-600" />
                                 )}
                               </Link>
                             }
@@ -269,7 +269,7 @@ function SheetContent({
                               <Icon className="size-3" />
                               <span className="sr-only">{label}</span>
                               {verified && (
-                                <BadgeCheck2Fill className="absolute -right-1 -top-1 size-3 text-green-600" />
+                                <BadgeCheck2 variant="fill" className="absolute -right-1 -top-1 size-3 text-green-600" />
                               )}
                             </Link>
                           </Tooltip>

apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/trusted/page.tsx

@@ -5,7 +5,7 @@ import { useConfirmModal } from "@/ui/modals/confirm-modal";
 import { PartnerAvatar } from "@/ui/partners/partner-avatar";
 import { Button, CopyText, Sheet, TimestampTooltip, Tooltip } from "@dub/ui";
 import {
-  BadgeCheck2Fill,
+  BadgeCheck2,
   Instagram,
   LinkedIn,
   TikTok,
@@ -415,7 +415,7 @@ export default function PartnersPage() {
                                       <Icon className="size-3 shrink-0" />
                                       <span>{value}</span>
                                       {verified && (
-                                        <BadgeCheck2Fill className="size-3 text-green-600" />
+                                        <BadgeCheck2 variant="fill" className="size-3 text-green-600" />
                                       )}
                                     </Link>
                                   }
@@ -430,7 +430,7 @@ export default function PartnersPage() {
                                     <Icon className="size-3" />
                                     <span className="sr-only">{label}</span>
                                     {verified && (
-                                      <BadgeCheck2Fill className="absolute -right-1 -top-1 size-3 text-green-600" />
+                                      <BadgeCheck2 variant="fill" className="absolute -right-1 -top-1 size-3 text-green-600" />
                                     )}
                                   </Link>
                                 </Tooltip>

apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsx

@@ -7,7 +7,7 @@ import { ProgramData } from "@/lib/types";
 import { RECURRING_MAX_DURATIONS } from "@/lib/zod/schemas/misc";
 import { COMMISSION_TYPES } from "@/lib/zod/schemas/rewards";
 import { RewardQualityFieldIndicator } from "@/ui/partners/rewards/reward-quality";
-import { Button, CircleCheckFill } from "@dub/ui";
+import { Button, CircleCheck } from "@dub/ui";
 import { cn } from "@dub/utils";
 import type { EventType } from "@prisma/client";
 import { useAction } from "next-safe-action/hooks";
@@ -202,7 +202,7 @@ export function Form() {
                           {description}
                         </span>
                       </div>
-                      <CircleCheckFill
+                      <CircleCheck variant="fill"
                         className={cn(
                           "-mr-px -mt-px flex size-4 scale-75 items-center justify-center rounded-full opacity-0 transition-[transform,opacity] duration-150",
                           isSelected && "scale-100 opacity-100",
@@ -283,7 +283,7 @@ export function Form() {
                           {COMMISSION_STRUCTURE_DESCRIPTIONS[value]}
                         </span>
                       </div>
-                      <CircleCheckFill
+                      <CircleCheck variant="fill"
                         className={cn(
                           "-mr-px -mt-px flex size-4 scale-75 items-center justify-center rounded-full opacity-0 transition-[transform,opacity] duration-150",
                           isSelected && "scale-100 opacity-100",
@@ -381,7 +381,7 @@ export function Form() {
                           {description}
                         </span>
                       </div>
-                      <CircleCheckFill
+                      <CircleCheck variant="fill"
                         className={cn(
                           "-mr-px -mt-px flex size-4 scale-75 items-center justify-center rounded-full opacity-0 transition-[transform,opacity] duration-150",
                           isSelected && "scale-100 opacity-100",

apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-fields.tsx

@@ -11,7 +11,7 @@ import { evaluateSocialContentRequirements } from "@/ui/partners/bounties/evalua
 import { X } from "@/ui/shared/icons";
 import {
   Button,
-  CircleCheckFill,
+  CircleCheck,
   FileUpload,
   Label,
   LoadingSpinner,
@@ -314,7 +314,7 @@ export function EmbedSocialUrlField({
               : "text-content-muted",
           )}
         >
-          <CircleCheckFill
+          <CircleCheck variant="fill"
             className={cn(
               "size-2.5 transition-opacity",
               isPostedFromYourAccount
@@ -331,7 +331,7 @@ export function EmbedSocialUrlField({
               isAfterStartDate ? "text-content-success" : "text-content-muted",
             )}
           >
-            <CircleCheckFill
+            <CircleCheck variant="fill"
               className={cn(
                 "size-2.5 transition-opacity",
                 isAfterStartDate

apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/(default)/apply/success/page.tsx

@@ -2,7 +2,7 @@ import { getProgram } from "@/lib/fetchers/get-program";
 import { prisma } from "@/lib/prisma";
 import { DEFAULT_PARTNER_GROUP } from "@/lib/zod/schemas/groups";
 import { Logo } from "@dub/ui";
-import { BoltFill, CursorRays, LinesY, MoneyBills2 } from "@dub/ui/icons";
+import { Bolt, CursorRays, LinesY, MoneyBills2 } from "@dub/ui/icons";
 import { OG_AVATAR_URL } from "@dub/utils";
 import { Store } from "lucide-react";
 import { notFound, redirect } from "next/navigation";
@@ -161,7 +161,7 @@ export default async function SuccessPage(props: {
                   src={program.logo || `${OG_AVATAR_URL}${program.name}`}
                   alt={`${program.name} logo`}
                 />
-                <BoltFill className="shrink-0 text-[var(--brand)] opacity-30" />
+                <Bolt variant="fill" className="shrink-0 text-[var(--brand)] opacity-30" />
                 <Logo className="size-10 shrink-0" />
               </div>
             )}

apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/network-approval-guide.tsx

@@ -5,7 +5,6 @@ import { useConfirmModal } from "@/ui/modals/confirm-modal";
 import {
   Button,
   CircleCheck,
-  CircleCheckFill,
   CircleDotted,
   CircleHalfDottedClock,
   CircleXmark,
@@ -175,7 +174,10 @@ export function NetworkApprovalGuide() {
                 >
                   <div className="flex min-w-0 items-center gap-2">
                     {completed ? (
-                      <CircleCheckFill className="size-4 shrink-0 text-green-500" />
+                      <CircleCheck
+                        variant="fill"
+                        className="size-4 shrink-0 text-green-500"
+                      />
                     ) : (
                       <CircleDotted className="size-4 shrink-0 text-neutral-400" />
                     )}

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/invite/page.tsx

@@ -9,7 +9,7 @@ import { BLOCK_COMPONENTS } from "@/ui/partners/lander/blocks";
 import { LanderHero } from "@/ui/partners/lander/lander-hero";
 import { LanderRewards } from "@/ui/partners/lander/lander-rewards";
 import { UserAvatar } from "@/ui/users/user-avatar";
-import { CircleCheckFill } from "@dub/ui";
+import { CircleCheck } from "@dub/ui";
 import { OG_AVATAR_URL, cn } from "@dub/utils";
 import { Reward } from "@prisma/client";
 import { redirect } from "next/navigation";
@@ -99,7 +99,7 @@ export default async function ProgramInvitePage(props: {
             className="-ml-4 size-20 rotate-[15deg] rounded-full drop-shadow-md"
           />
           <div className="absolute -bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-white p-0.5">
-            <CircleCheckFill className="size-8 text-green-500" />
+            <CircleCheck variant="fill" className="size-8 text-green-500" />
           </div>
         </div>
 

apps/web/app/[domain]/[key]/inspect/card.tsx

@@ -1,4 +1,4 @@
-import { CopyButton, FlagFill, LinkLogo } from "@dub/ui";
+import { CopyButton, Flag, LinkLogo } from "@dub/ui";
 import { getApexDomain, linkConstructor } from "@dub/utils";
 import Link from "next/link";
 
@@ -47,7 +47,7 @@ export default function LinkInspectorCard({
         target="_blank"
         className="rounded-md p-2 transition-all duration-75 hover:bg-red-100 focus:outline-none active:bg-red-200"
       >
-        <FlagFill className="h-4 w-4 text-red-500" />
+        <Flag variant="fill" className="h-4 w-4 text-red-500" />
       </Link>
     </div>
   );

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/add-edit-group-additional-link-modal.tsx

@@ -11,7 +11,7 @@ import {
   Modal,
   useMediaQuery,
 } from "@dub/ui";
-import { CircleCheckFill } from "@dub/ui/icons";
+import { CircleCheck } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -283,7 +283,7 @@ function AddDestinationUrlModalContent({
                         {type.recommended && (
                           <Badge variant="blueGradient">Recommended</Badge>
                         )}
-                        <CircleCheckFill
+                        <CircleCheck variant="fill"
                           className={cn(
                             "-mr-px -mt-px flex size-4 scale-75 items-center justify-center rounded-full opacity-0 transition-[transform,opacity] duration-150",
                             isSelected && "scale-100 opacity-100",

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/group-link-settings.tsx

@@ -10,7 +10,7 @@ import { GroupProps } from "@/lib/types";
 import { useConfirmModal } from "@/ui/modals/confirm-modal";
 import { GroupSettingsRow } from "@/ui/partners/groups/group-settings-row";
 import { Badge, Button, UTMBuilder } from "@dub/ui";
-import { CircleCheckFill } from "@dub/ui/icons";
+import { CircleCheck } from "@dub/ui/icons";
 import { cn, deepEqual } from "@dub/utils";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
@@ -225,7 +225,7 @@ function GroupLinkSettingsForm({ group }: { group: GroupProps }) {
                     {type.recommended && (
                       <Badge variant="blueGradient">Recommended</Badge>
                     )}
-                    <CircleCheckFill
+                    <CircleCheck variant="fill"
                       className={cn(
                         "-mr-px -mt-px flex size-4 scale-75 items-center justify-center rounded-full opacity-0 transition-[transform,opacity] duration-150",
                         isSelected && "scale-100 opacity-100",

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-empty-state.tsx

@@ -1,18 +1,16 @@
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { Button } from "@dub/ui";
-import { Star, StarFill } from "@dub/ui/icons";
+import { Star } from "@dub/ui/icons";
 import { SVGProps, useId } from "react";
 
 export function NetworkEmptyState({
   isFiltered,
   isStarred,
   onClearAllFilters,
-  variant = "default",
 }: {
   isFiltered: boolean;
   isStarred: boolean;
   onClearAllFilters: () => void;
-  variant?: "default" | "ignored";
 }) {
   return (
     <AnimatedEmptyState
@@ -24,7 +22,7 @@ export function NetworkEmptyState({
       cardContent={(idx) => (
         <div className="flex grow items-center gap-4">
           {idx % 2 === 0 || isStarred ? (
-            <StarFill className="size-3 shrink-0 text-amber-500" />
+            <Star variant="fill" className="size-3 shrink-0 text-amber-500" />
           ) : (
             <Star className="text-content-muted size-3 shrink-0" />
           )}

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-partner-card.tsx

@@ -10,7 +10,7 @@ import { PartnerAvatar } from "@/ui/partners/partner-avatar";
 import { PartnerStarButton } from "@/ui/partners/partner-star-button";
 import { TrustedPartnerBadge } from "@/ui/partners/trusted-partner-badge";
 import {
-  BadgeCheck2Fill,
+  BadgeCheck2,
   Button,
   DynamicTooltipWrapper,
   Tooltip,
@@ -351,7 +351,7 @@ function PlatformStatCard({
           className={cn("size-3.5", !value && "text-content-subtle opacity-40")}
         />
         {verified && (
-          <BadgeCheck2Fill className="absolute -right-1.5 -top-1.5 size-3 text-green-600" />
+          <BadgeCheck2 variant="fill" className="absolute -right-1.5 -top-1.5 size-3 text-green-600" />
         )}
       </div>
       <span
@@ -435,7 +435,7 @@ function PlatformStatTooltipContent({
       <div className="text-content-subtle border-border-subtle flex items-center gap-1.5 border-t px-3 py-1.5 font-medium">
         {verifiedAt ? (
           <>
-            <BadgeCheck2Fill className="size-3 shrink-0 text-green-600" />
+            <BadgeCheck2 variant="fill" className="size-3 shrink-0 text-green-600" />
             Verified {timeAgo(verifiedAt, { withAgo: true })}
           </>
         ) : (

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx

@@ -20,7 +20,6 @@ import {
   Instagram,
   LinkedIn,
   Star,
-  StarFill,
   TikTok,
   Twitter,
   User,
@@ -269,7 +268,7 @@ export function ProgramPartnerNetworkPageClient({
                   }}
                   icon={
                     isStarred ? (
-                      <StarFill className="size-4 text-amber-500" />
+                      <Star variant="fill" className="size-4 text-amber-500" />
                     ) : (
                       <Star className="text-content-subtle size-4" />
                     )
@@ -385,7 +384,6 @@ export function ProgramPartnerNetworkPageClient({
           isFiltered={isFiltered}
           isStarred={variant === "ignored" ? false : isStarred}
           onClearAllFilters={onRemoveAll}
-          variant={variant === "ignored" ? "ignored" : "default"}
         />
       )}
     </div>

apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/success/page-client.tsx

@@ -4,7 +4,7 @@ import useProgram from "@/lib/swr/use-program";
 import LayoutLoader from "@/ui/layout/layout-loader";
 import { AnimatedEmptyState } from "@/ui/shared/animated-empty-state";
 import { X } from "@/ui/shared/icons";
-import { buttonVariants, CircleCheckFill, Grid, Receipt2 } from "@dub/ui";
+import { buttonVariants, CircleCheck, Grid, Receipt2 } from "@dub/ui";
 import {
   cn,
   currencyFormatter,
@@ -111,7 +111,7 @@ export function PayoutsSuccessPageClient() {
             "animate-slide-up-fade motion-reduce:animate-fade-in [--offset:10px] [animation-duration:0.5s] [animation-fill-mode:both]",
           )}
         >
-          <CircleCheckFill className="size-8 text-green-600" />
+          <CircleCheck variant="fill" className="size-8 text-green-600" />
           <h2 className="text-content-default mt-4 text-lg font-semibold">
             Thank you for your payout!
           </h2>

apps/web/app/app.dub.co/(invites)/[slug]/invite/page.tsx

@@ -2,13 +2,13 @@ import { getSession } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { UserAvatar } from "@/ui/users/user-avatar";
 import {
-  Book2Fill,
-  CircleCheckFill,
+  Book2,
+  CircleCheck,
   CircleHalfDottedClock,
   DubLinksIcon,
   DubPartnersIcon,
-  LifeRingFill,
-  MsgsFill,
+  LifeRing,
+  Msgs,
   Tooltip,
   Wordmark,
 } from "@dub/ui";
@@ -231,21 +231,21 @@ export default async function WorkspaceInvitePage({
             <div className="divide-border-subtle border-border-subtle bg-bg-muted flex flex-col divide-y rounded-lg border">
               {[
                 {
-                  icon: LifeRingFill,
+                  icon: LifeRing,
                   title: "Help center",
                   description: "Answers to your questions",
                   href: "https://dub.co/help",
                   cta: "Read",
                 },
                 {
-                  icon: Book2Fill,
+                  icon: Book2,
                   title: "Docs",
                   description: "Platform documentation",
                   href: "https://dub.co/docs",
                   cta: "Learn",
                 },
                 {
-                  icon: MsgsFill,
+                  icon: Msgs,
                   title: "Support",
                   description: "Product support or help requests",
                   href: "https://dub.co/contact/support",
@@ -258,7 +258,7 @@ export default async function WorkspaceInvitePage({
                 >
                   <div className="flex min-w-0 items-center gap-2">
                     <div className="flex size-8 items-center justify-center rounded-md bg-black/5">
-                      <Icon className="size-4" />
+                      <Icon variant="fill" className="size-4" />
                     </div>
                     <div className="min-w-0">
                       <div className="text-content-default text-sm font-medium">
@@ -326,7 +326,7 @@ function Hero({
               <CircleHalfDottedClock className="size-5 text-neutral-500" />
             </div>
           ) : (
-            <CircleCheckFill className="size-8 text-green-500" />
+            <CircleCheck variant="fill" className="size-8 text-green-500" />
           )}
         </div>
       </div>