diff --git a/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/fraud/review-fraud-alert-sheet.tsx b/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/fraud/review-fraud-alert-sheet.tsx
index c4da07013f7..3f16b1351df 100644
--- a/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/fraud/review-fraud-alert-sheet.tsx
+++ b/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>
diff --git a/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/trusted/page.tsx b/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/trusted/page.tsx
index 59e44b00082..209fe0d3214 100644
--- a/apps/web/app/(ee)/admin.dub.co/(dashboard)/partners/trusted/page.tsx
+++ b/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>
diff --git a/apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsx b/apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsx
index bd93b3062f6..255faa3e7d9 100644
--- a/apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/program/new/rewards/form.tsx
+++ b/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",
diff --git a/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-fields.tsx b/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-fields.tsx
index c7113915bf1..6c7dda94087 100644
--- a/apps/web/app/(ee)/app.dub.co/embed/referrals/bounties/submission-fields.tsx
+++ b/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
diff --git a/apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/(default)/apply/success/page.tsx b/apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/(default)/apply/success/page.tsx
index dfd8a24f0f1..86636f35a1c 100644
--- a/apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/(default)/apply/success/page.tsx
+++ b/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>
             )}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/network-approval-guide.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/network-approval-guide.tsx
index 6ed63af370c..dc9cb462d36 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/profile/network-approval-guide.tsx
+++ b/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" />
                     )}
diff --git a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/invite/page.tsx b/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/invite/page.tsx
index feec9f6d398..e4fcc39fa5d 100644
--- a/apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/invite/page.tsx
+++ b/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>
 
diff --git a/apps/web/app/[domain]/[key]/inspect/card.tsx b/apps/web/app/[domain]/[key]/inspect/card.tsx
index a37c0f609f6..8c9c400d08f 100644
--- a/apps/web/app/[domain]/[key]/inspect/card.tsx
+++ b/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>
   );
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/add-edit-group-additional-link-modal.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/add-edit-group-additional-link-modal.tsx
index aefa0554e26..9852adf0b5e 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/add-edit-group-additional-link-modal.tsx
+++ b/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",
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/group-link-settings.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/group-link-settings.tsx
index bd79f97ce88..8f21dd73830 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/groups/[groupSlug]/links/group-link-settings.tsx
+++ b/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",
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-empty-state.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-empty-state.tsx
index bf7e5d7ce98..2177dae8be4 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-empty-state.tsx
+++ b/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" />
           )}
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-partner-card.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-partner-card.tsx
index e672a3e29ca..b93a474048f 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/network-partner-card.tsx
+++ b/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 })}
           </>
         ) : (
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx
index 4db6eecc29f..1e01425ae68 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/network/page-client.tsx
+++ b/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>
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/success/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/success/page-client.tsx
index 2d03e82863b..417243734a2 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/payouts/success/page-client.tsx
+++ b/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>
diff --git a/apps/web/app/app.dub.co/(invites)/[slug]/invite/page.tsx b/apps/web/app/app.dub.co/(invites)/[slug]/invite/page.tsx
index 91522261d84..fc3b39b3d40 100644
--- a/apps/web/app/app.dub.co/(invites)/[slug]/invite/page.tsx
+++ b/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>
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx
index d6f06622b8a..3daefe4e4bb 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/default-domain-selector.tsx
@@ -2,14 +2,15 @@
 
 import { OnboardingStep } from "@/lib/onboarding/types";
 import {
-  BoltFill,
+  Bolt,
   Button,
-  CircleCheckFill,
+  CircleCheck,
   Crown,
   CursorRays,
   Flask,
   Globe,
   type Icon,
+  withFillVariant,
 } from "@dub/ui";
 import { capitalize, cn } from "@dub/utils";
 import { usePlausible } from "next-plausible";
@@ -31,7 +32,7 @@ export function DefaultDomainSelector() {
         <DomainOption
           step="domain/custom"
           icon="https://assets.dub.co/icons/domain-sign.webp"
-          bannerIcon={CircleCheckFill}
+          bannerIcon={withFillVariant(CircleCheck)}
           bannerText="Recommended setup"
           bannerVariant="recommended"
           title="Connect a custom domain"
@@ -81,7 +82,7 @@ export function DefaultDomainSelector() {
           <DomainOption
             step="domain/subdomain"
             icon="https://assets.dub.co/icons/gift.webp"
-            bannerIcon={BoltFill}
+            bannerIcon={withFillVariant(Bolt)}
             bannerText="Instant setup"
             title={
               <>
@@ -94,7 +95,7 @@ export function DefaultDomainSelector() {
                 text: "Best for testing purposes",
               },
               {
-                icon: BoltFill,
+                icon: withFillVariant(Bolt),
                 text: "Instant subdomain setup",
               },
             ]}
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx
index 28d7433e8ca..368621a2fd4 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/register/page.tsx
@@ -1,18 +1,15 @@
 "use client";
 
-import { BoltFill } from "@dub/ui";
-import { useOnboardingProduct } from "../../../use-onboarding-product";
+import { Bolt, withFillVariant } from "@dub/ui";
 import { StepPage } from "../../step-page";
 import { Form } from "./form";
 
 export default function Register() {
-  const product = useOnboardingProduct();
-
   return (
     <StepPage
       title="Claim your free .link domain"
       badge={{
-        icon: BoltFill,
+        icon: withFillVariant(Bolt),
         label: "Instant setup",
       }}
       description="Exclusively free for one year"
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/subdomain/page.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/subdomain/page.tsx
index a47105c4625..abbf548f3e2 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/subdomain/page.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/domain/subdomain/page.tsx
@@ -1,4 +1,6 @@
-import { BoltFill } from "@dub/ui";
+"use client";
+
+import { Bolt, withFillVariant } from "@dub/ui";
 import { StepPage } from "../../step-page";
 import { Form } from "./form";
 
@@ -8,7 +10,7 @@ export default function Subdomain() {
       title="Claim your free .dub.link subdomain"
       description="Set up your branded short-link domain in one click."
       badge={{
-        icon: BoltFill,
+        icon: withFillVariant(Bolt),
         label: "Instant setup",
       }}
     >
diff --git a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx
index c1f60dd4c0b..afbb2e4d1f6 100644
--- a/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/form.tsx
+++ b/apps/web/app/app.dub.co/(onboarding)/onboarding/(steps)/program/reward/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 { AnimatedSizeContainer, Button, CircleCheckFill } from "@dub/ui";
+import { AnimatedSizeContainer, Button, CircleCheck } from "@dub/ui";
 import { capitalize, cn } from "@dub/utils";
 import type { EventType } from "@prisma/client";
 import { usePlausible } from "next-plausible";
@@ -206,7 +206,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",
@@ -290,7 +290,7 @@ export function Form() {
                                 {shortDescription}
                               </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",
@@ -385,7 +385,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",
diff --git a/apps/web/ui/integrations/integration-status-badge.tsx b/apps/web/ui/integrations/integration-status-badge.tsx
index 416eef5e820..b7638123998 100644
--- a/apps/web/ui/integrations/integration-status-badge.tsx
+++ b/apps/web/ui/integrations/integration-status-badge.tsx
@@ -1,4 +1,4 @@
-import { BadgeCheck2Fill, DubCraftedShield, Tooltip } from "@dub/ui";
+import { BadgeCheck2, DubCraftedShield, Tooltip } from "@dub/ui";
 import { CircleWarning } from "@dub/ui/icons";
 import { DUB_WORKSPACE_ID } from "@dub/utils";
 
@@ -24,7 +24,7 @@ export function IntegrationStatusBadge({
       <Tooltip
         content={
           <div className="flex max-w-xs items-start gap-1.5 p-3">
-            <BadgeCheck2Fill className="mt-0.5 size-5 shrink-0 text-blue-500" />
+            <BadgeCheck2 variant="fill" className="mt-0.5 size-5 shrink-0 text-blue-500" />
             <div className="flex flex-col gap-1">
               <span className="text-sm font-semibold text-neutral-900">
                 Verified Integration
@@ -36,7 +36,7 @@ export function IntegrationStatusBadge({
           </div>
         }
       >
-        <BadgeCheck2Fill className="size-4 shrink-0 text-blue-500" />
+        <BadgeCheck2 variant="fill" className="size-4 shrink-0 text-blue-500" />
       </Tooltip>
     );
   }
diff --git a/apps/web/ui/modals/link-conversion-tracking-modal.tsx b/apps/web/ui/modals/link-conversion-tracking-modal.tsx
index 23b787e91b6..6cbb161af63 100644
--- a/apps/web/ui/modals/link-conversion-tracking-modal.tsx
+++ b/apps/web/ui/modals/link-conversion-tracking-modal.tsx
@@ -1,7 +1,7 @@
 import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { LinkProps } from "@/lib/types";
-import { Button, CircleCheckFill, LinkLogo, Modal } from "@dub/ui";
+import { Button, CircleCheck, LinkLogo, Modal } from "@dub/ui";
 import { cn, getApexDomain, getPrettyUrl, pluralize } from "@dub/utils";
 import {
   Dispatch,
@@ -139,7 +139,7 @@ function LinkConversionTrackingModalInner({
                   <span className="font-medium">{option.label}</span>
                   <span>{option.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",
diff --git a/apps/web/ui/partners/bounties/bounty-social-content.tsx b/apps/web/ui/partners/bounties/bounty-social-content.tsx
index 6a84281d397..2a0c1c3a11b 100644
--- a/apps/web/ui/partners/bounties/bounty-social-content.tsx
+++ b/apps/web/ui/partners/bounties/bounty-social-content.tsx
@@ -6,7 +6,7 @@ import { PartnerBountyProps, SocialContent } from "@/lib/types";
 import { useClaimBountyContext } from "@/ui/partners/bounties/claim-bounty-context";
 import { useClaimBountyForm } from "@/ui/partners/bounties/use-claim-bounty-form";
 import { useSocialContent } from "@/ui/partners/bounties/use-social-content";
-import { Button, CircleCheckFill, LoadingSpinner } from "@dub/ui";
+import { Button, CircleCheck, LoadingSpinner } from "@dub/ui";
 import { cn, formatDate } from "@dub/utils";
 import { useReferralsEmbedData } from "app/(ee)/app.dub.co/embed/referrals/page-client";
 import { AlertTriangle } from "lucide-react";
@@ -44,7 +44,7 @@ function SocialContentRequirementChecks({
           isPostedFromYourAccount ? "text-green-600" : "text-neutral-400",
         )}
       >
-        <CircleCheckFill
+        <CircleCheck variant="fill"
           className={cn(
             "size-2.5 transition-opacity",
             isPostedFromYourAccount ? "text-green-600" : "text-neutral-200",
@@ -59,7 +59,7 @@ function SocialContentRequirementChecks({
           isAfterStartDate ? "text-green-600" : "text-neutral-400",
         )}
       >
-        <CircleCheckFill
+        <CircleCheck variant="fill"
           className={cn(
             "size-2.5 transition-opacity",
             isAfterStartDate ? "text-green-600" : "text-neutral-200",
diff --git a/apps/web/ui/partners/discounts/add-edit-discount-sheet.tsx b/apps/web/ui/partners/discounts/add-edit-discount-sheet.tsx
index 4195f9b032e..017f29f7d9f 100644
--- a/apps/web/ui/partners/discounts/add-edit-discount-sheet.tsx
+++ b/apps/web/ui/partners/discounts/add-edit-discount-sheet.tsx
@@ -27,7 +27,7 @@ import {
   Tooltip,
   useRouterStuff,
 } from "@dub/ui";
-import { CircleCheckFill, StripeIcon, Tag } from "@dub/ui/icons";
+import { CircleCheck, StripeIcon, Tag } from "@dub/ui/icons";
 import { capitalize, cn, pluralize } from "@dub/utils";
 import { DiscountProvider } from "@prisma/client";
 import { useAction } from "next-safe-action/hooks";
@@ -355,7 +355,7 @@ function DiscountSheetContent({
                                 <span className="font-medium">{label}</span>
                                 <span>{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",
diff --git a/apps/web/ui/partners/fraud-risks/partner-risk-banner.tsx b/apps/web/ui/partners/fraud-risks/partner-risk-banner.tsx
index 0e32a13213f..4ad6097dd51 100644
--- a/apps/web/ui/partners/fraud-risks/partner-risk-banner.tsx
+++ b/apps/web/ui/partners/fraud-risks/partner-risk-banner.tsx
@@ -7,7 +7,7 @@ import {
   FraudGroupCountByPartner,
 } from "@/lib/types";
 import { ButtonLink } from "@/ui/placeholders/button-link";
-import { FlagFill } from "@dub/ui";
+import { Flag } from "@dub/ui";
 import { useParams } from "next/navigation";
 
 export function PartnerApplicationRiskBanner({
@@ -28,7 +28,7 @@ export function PartnerApplicationRiskBanner({
   return (
     <div className="flex items-center justify-between gap-2 rounded-t-xl border border-b-0 border-red-200 bg-red-100 px-4 py-2">
       <div className="flex items-center gap-2">
-        <FlagFill className="size-4 text-red-700" />
+        <Flag variant="fill" className="size-4 text-red-700" />
         <h3 className="text-sm font-semibold leading-5 text-red-700">
           Potential risk detected
         </h3>
@@ -70,7 +70,7 @@ export function PartnerRiskBanner({
   return (
     <div className="flex items-center justify-between gap-2 rounded-t-xl border border-b-0 border-red-200 bg-red-100 px-4 py-2">
       <div className="flex items-center gap-2">
-        <FlagFill className="size-4 text-red-700" />
+        <Flag variant="fill" className="size-4 text-red-700" />
         <h3 className="text-sm font-semibold leading-5 text-red-700">
           Potential risk detected
         </h3>
diff --git a/apps/web/ui/partners/fraud-risks/partner-risk-indicator.tsx b/apps/web/ui/partners/fraud-risks/partner-risk-indicator.tsx
index c29cc40e977..c81ea52548f 100644
--- a/apps/web/ui/partners/fraud-risks/partner-risk-indicator.tsx
+++ b/apps/web/ui/partners/fraud-risks/partner-risk-indicator.tsx
@@ -2,7 +2,7 @@ import { FRAUD_SEVERITY_CONFIG } from "@/lib/api/fraud/constants";
 import { useFraudGroupCount } from "@/lib/swr/use-fraud-groups-count";
 import { FraudGroupCountByPartner } from "@/lib/types";
 import { ButtonLink } from "@/ui/placeholders/button-link";
-import { DynamicTooltipWrapper, FlagFill } from "@dub/ui";
+import { DynamicTooltipWrapper, Flag } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { useParams, usePathname } from "next/navigation";
 
@@ -70,7 +70,7 @@ export function PartnerRiskIndicator({ partnerId }: PartnerRiskIndicatorProps) {
         content: tooltipContent,
       }}
     >
-      <FlagFill
+      <Flag variant="fill"
         className={cn(
           "size-3.5 cursor-pointer",
           FRAUD_SEVERITY_CONFIG["high"].fg,
diff --git a/apps/web/ui/partners/partner-network/partner-network-status-badge.tsx b/apps/web/ui/partners/partner-network/partner-network-status-badge.tsx
index 9e49b48ccb3..e8944c7dfdc 100644
--- a/apps/web/ui/partners/partner-network/partner-network-status-badge.tsx
+++ b/apps/web/ui/partners/partner-network/partner-network-status-badge.tsx
@@ -1,4 +1,4 @@
-import { BadgeCheck2Fill, Tooltip } from "@dub/ui";
+import { BadgeCheck2, Tooltip } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { PartnerNetworkStatus } from "@prisma/client";
 import { TrustedPartnerBadge } from "../trusted-partner-badge";
@@ -19,7 +19,7 @@ export function PartnerNetworkStatusBadge({
       <Tooltip
         content={
           <div className="flex max-w-xs items-start gap-1.5 p-3">
-            <BadgeCheck2Fill className="mt-0.5 size-5 shrink-0 text-blue-500" />
+            <BadgeCheck2 variant="fill" className="mt-0.5 size-5 shrink-0 text-blue-500" />
             <div className="flex flex-col gap-1">
               <span className="text-sm font-semibold text-neutral-900">
                 Approved Partner
@@ -31,7 +31,7 @@ export function PartnerNetworkStatusBadge({
           </div>
         }
       >
-        <BadgeCheck2Fill
+        <BadgeCheck2 variant="fill"
           className={cn(
             "shrink-0 text-blue-500",
             size === "small" ? "size-3.5" : "size-5",
diff --git a/apps/web/ui/partners/partner-platform-card.tsx b/apps/web/ui/partners/partner-platform-card.tsx
index 67bda8572b6..482d7ca2827 100644
--- a/apps/web/ui/partners/partner-platform-card.tsx
+++ b/apps/web/ui/partners/partner-platform-card.tsx
@@ -1,6 +1,6 @@
 import {
   ArrowUpRight,
-  BadgeCheck2Fill,
+  BadgeCheck2,
   Button,
   Icon,
   Tooltip,
@@ -57,7 +57,7 @@ export function PartnerPlatformCard({
             {verified && (
               <Tooltip content="Verified" disableHoverableContent>
                 <div className="shrink-0">
-                  <BadgeCheck2Fill className="size-3.5 text-green-600" />
+                  <BadgeCheck2 variant="fill" className="size-3.5 text-green-600" />
                 </div>
               </Tooltip>
             )}
diff --git a/apps/web/ui/partners/partner-platforms-form.tsx b/apps/web/ui/partners/partner-platforms-form.tsx
index 2f8cb0fd482..306fe4d8a16 100644
--- a/apps/web/ui/partners/partner-platforms-form.tsx
+++ b/apps/web/ui/partners/partner-platforms-form.tsx
@@ -13,7 +13,7 @@ import { SocialVerificationByCodeModal } from "@/ui/modals/social-verification-b
 import {
   AnimatedSizeContainer,
   Button,
-  CircleCheckFill,
+  CircleCheck,
   Globe,
   Icon,
   Instagram,
@@ -628,7 +628,7 @@ function VerifyButton({
       text={isVerified ? "Verified" : "Verify"}
       icon={
         isVerified ? (
-          <CircleCheckFill className="size-4 text-green-700" />
+          <CircleCheck variant="fill" className="size-4 text-green-700" />
         ) : (
           <Icon className="size-3.5" />
         )
diff --git a/apps/web/ui/partners/partner-social-column.tsx b/apps/web/ui/partners/partner-social-column.tsx
index f05b2dc3284..6c6c27fc6fd 100644
--- a/apps/web/ui/partners/partner-social-column.tsx
+++ b/apps/web/ui/partners/partner-social-column.tsx
@@ -1,5 +1,5 @@
 import { PartnerPlatformProps } from "@/lib/types";
-import { BadgeCheck2Fill, TimestampTooltip } from "@dub/ui";
+import { BadgeCheck2, TimestampTooltip } from "@dub/ui";
 import { getDomainWithoutWWW } from "@dub/utils";
 import { PlatformType } from "@prisma/client";
 
@@ -46,7 +46,7 @@ export function PartnerSocialColumn({
           delayDuration={150}
         >
           <div>
-            <BadgeCheck2Fill className="size-4 text-green-600" />
+            <BadgeCheck2 variant="fill" className="size-4 text-green-600" />
           </div>
         </TimestampTooltip>
       )}
diff --git a/apps/web/ui/partners/partner-star-button.tsx b/apps/web/ui/partners/partner-star-button.tsx
index 5e78d1fe64b..9bb3a20158e 100644
--- a/apps/web/ui/partners/partner-star-button.tsx
+++ b/apps/web/ui/partners/partner-star-button.tsx
@@ -3,7 +3,7 @@ import { mutatePrefix } from "@/lib/swr/mutate";
 import useWorkspace from "@/lib/swr/use-workspace";
 import { NetworkPartnerProps } from "@/lib/types";
 import { Button } from "@dub/ui";
-import { Star, StarFill } from "@dub/ui/icons";
+import { Star } from "@dub/ui/icons";
 import { cn } from "@dub/utils";
 import { useAction } from "next-safe-action/hooks";
 import { toast } from "sonner";
@@ -95,7 +95,7 @@ export function PartnerStarButton({
       onClick={() => handleToggleStarred(!partner.starredAt)}
       icon={
         partner.starredAt ? (
-          <StarFill className={cn("text-amber-500", iconSize)} />
+          <Star variant="fill" className={cn("text-amber-500", iconSize)} />
         ) : (
           <Star className={cn("text-content-subtle", iconSize)} />
         )
diff --git a/apps/web/ui/partners/program-application-sheet.tsx b/apps/web/ui/partners/program-application-sheet.tsx
index 3969911e6bc..bbac4fb78bc 100644
--- a/apps/web/ui/partners/program-application-sheet.tsx
+++ b/apps/web/ui/partners/program-application-sheet.tsx
@@ -15,7 +15,6 @@ import {
   Button,
   buttonVariants,
   CircleCheck,
-  CircleCheckFill,
   Grid,
   LoadingSpinner,
   Sheet,
@@ -303,7 +302,7 @@ function ProgramApplicationSheetForm({
               className="-ml-4 size-20 rotate-[15deg] 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>
           <span className="mt-6 block text-base font-semibold text-neutral-900">
diff --git a/apps/web/ui/shared/password-requirements.tsx b/apps/web/ui/shared/password-requirements.tsx
index b54e70e18d0..90b9d62addd 100644
--- a/apps/web/ui/shared/password-requirements.tsx
+++ b/apps/web/ui/shared/password-requirements.tsx
@@ -1,4 +1,4 @@
-import { CircleCheckFill } from "@dub/ui";
+import { CircleCheck } from "@dub/ui";
 import { cn } from "@dub/utils";
 import { memo } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
@@ -58,7 +58,7 @@ export const PasswordRequirements = memo(function PasswordRequirements({
               checked ? "text-green-600" : errors[field] && "text-red-600",
             )}
           >
-            <CircleCheckFill
+            <CircleCheck variant="fill"
               className={cn(
                 "size-2.5 transition-opacity",
                 checked
diff --git a/apps/web/ui/support/chat-bubble.tsx b/apps/web/ui/support/chat-bubble.tsx
index 829ac7d18f3..1645ca273b1 100644
--- a/apps/web/ui/support/chat-bubble.tsx
+++ b/apps/web/ui/support/chat-bubble.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Tooltip } from "@dub/ui";
-import { MsgsFill, Xmark } from "@dub/ui/icons";
+import { Msgs, Xmark } from "@dub/ui/icons";
 import { AnimatePresence, motion } from "motion/react";
 import { useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
@@ -108,7 +108,7 @@ export function SupportChatBubble() {
               exit={{ opacity: 0, scale: 0.8 }}
               transition={{ duration: 0.15 }}
             >
-              <MsgsFill className="size-5 text-white" />
+              <Msgs variant="fill" className="size-5 text-white" />
             </motion.div>
           )}
         </AnimatePresence>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e236551ca20..f7c9eb86752 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dub/ui",
   "description": "UI components for Dub",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
diff --git a/packages/ui/src/card-selector.tsx b/packages/ui/src/card-selector.tsx
index 06757811c12..a30efea18df 100644
--- a/packages/ui/src/card-selector.tsx
+++ b/packages/ui/src/card-selector.tsx
@@ -3,7 +3,7 @@
 import { cn } from "@dub/utils";
 import { ReactNode } from "react";
 import { AnimatedSizeContainer } from "./animated-size-container";
-import { CircleCheckFill } from "./icons";
+import { CircleCheck } from "./icons";
 
 export interface CardSelectorOption {
   key: string;
@@ -79,7 +79,7 @@ export function CardSelector({
               <span className="text-xs text-neutral-600">{description}</span>
             </div>
 
-            <CircleCheckFill
+            <CircleCheck variant="fill"
               className={cn(
                 "mr-1.5 mt-1.5 flex size-4 scale-75 items-center justify-center rounded-full opacity-0 transition-[transform,opacity] duration-150",
                 isSelected && "scale-100 opacity-100",
diff --git a/packages/ui/src/combobox/index.tsx b/packages/ui/src/combobox/index.tsx
index 7e5d97ba854..ff0b84834fa 100644
--- a/packages/ui/src/combobox/index.tsx
+++ b/packages/ui/src/combobox/index.tsx
@@ -16,8 +16,7 @@ import { Button, ButtonProps } from "../button";
 import { useMediaQuery } from "../hooks";
 import {
   Check2,
-  CheckboxCheckedFill,
-  CheckboxUnchecked,
+  CheckboxIcon,
   Icon,
   LoadingSpinner,
   Plus,
@@ -445,9 +444,9 @@ function Option({
           {multiple && (
             <div className="text-content-default shrink-0">
               {selected ? (
-                <CheckboxCheckedFill className="text-content-default size-4" />
+                <CheckboxIcon variant="fill" className="text-content-default size-4" />
               ) : (
-                <CheckboxUnchecked className="text-content-muted size-4" />
+                <CheckboxIcon className="text-content-muted size-4" />
               )}
             </div>
           )}
diff --git a/packages/ui/src/content.ts b/packages/ui/src/content.ts
index 957a4a405a2..38ea1b1f73b 100644
--- a/packages/ui/src/content.ts
+++ b/packages/ui/src/content.ts
@@ -1,27 +1,28 @@
 import { ElementType } from "react";
 import {
-  Book2Fill,
-  BriefcaseFill,
-  BulletListFill,
-  DiamondTurnRightFill,
+  Book2,
+  Briefcase,
+  BulletList,
+  DiamondTurnRight,
   DubAnalyticsIcon,
   DubLinksIcon,
   DubPartnersIcon,
-  EnvelopeFill,
-  FeatherFill,
+  Envelope,
+  Feather,
   Github,
   Go,
-  LifeRingFill,
+  LifeRing,
   LinkedIn,
-  MicrophoneFill,
+  Microphone,
   Php,
   Python,
   Ruby,
-  Toggle2Fill,
+  Toggle2,
   Twitter,
   Typescript,
-  UsersFill,
+  Users,
   YouTube,
+  withFillVariant,
 } from "./icons";
 import { DubApiIcon } from "./icons/dub-api";
 import { Logo } from "./logo";
@@ -71,7 +72,7 @@ export const FEATURES_LIST = [
   {
     title: "Dub Integrations",
     description: "Connect Dub with your favorite tools",
-    icon: Toggle2Fill,
+    icon: withFillVariant(Toggle2),
     href: "/integrations",
   },
 ];
@@ -114,19 +115,19 @@ export const SDKS = [
 
 export const SOLUTIONS: NavItemChildren = [
   {
-    icon: DiamondTurnRightFill,
+    icon: withFillVariant(DiamondTurnRight),
     title: "Marketing Attribution",
     description: "Easily track and measure marketing impact",
     href: "/analytics",
   },
   {
-    icon: MicrophoneFill,
+    icon: withFillVariant(Microphone),
     title: "Content Creators",
     description: "Intelligent audience insights and link tracking",
     href: "/solutions/creators",
   },
   {
-    icon: UsersFill,
+    icon: withFillVariant(Users),
     title: "Affiliate Management",
     description: "Manage affiliates and automate payouts",
     href: "/partners",
@@ -139,37 +140,37 @@ export const SOLUTIONS: NavItemChildren = [
 
 export const RESOURCES = [
   {
-    icon: LifeRingFill,
+    icon: LifeRing,
     title: "Help Center",
     description: "Answers to your questions",
     href: "/help",
   },
   {
-    icon: Book2Fill,
+    icon: Book2,
     title: "Docs",
     description: "Platform documentation",
     href: "/docs",
   },
   {
-    icon: UsersFill,
+    icon: withFillVariant(Users),
     title: "About",
     description: "Company, values, and team",
     href: "/about",
   },
   {
-    icon: BriefcaseFill,
+    icon: Briefcase,
     title: "Careers",
     description: "Join our global, remote team",
     href: "/careers",
   },
   {
-    icon: FeatherFill,
+    icon: Feather,
     title: "Blog",
     description: "Insights and stories",
     href: "/blog",
   },
   {
-    icon: BulletListFill,
+    icon: BulletList,
     title: "Changelog",
     description: "Releases and updates",
     href: "/changelog",
@@ -181,7 +182,7 @@ export const RESOURCES = [
     href: "/brand",
   },
   {
-    icon: EnvelopeFill,
+    icon: Envelope,
     title: "Contact",
     description: "Reach out to support or sales",
     href: "/contact",
diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx
index 493ffe2ccf9..7d1a8e1ee5e 100644
--- a/packages/ui/src/icons/index.tsx
+++ b/packages/ui/src/icons/index.tsx
@@ -81,6 +81,8 @@ export * from "./default-domains/github-enhanced";
 export * from "./default-domains/google-enhanced";
 export * from "./default-domains/spotify";
 
+export * from "./with-fill-variant";
+
 // Nucleo icons
 export * from "./nucleo";
 
diff --git a/packages/ui/src/icons/nucleo/badge-check2-fill.tsx b/packages/ui/src/icons/nucleo/badge-check2-fill.tsx
deleted file mode 100644
index 1052808343d..00000000000
--- a/packages/ui/src/icons/nucleo/badge-check2-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function BadgeCheck2Fill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M16.249,7.763s0,0,0,0l-1.248-1.248v-1.765c0-.965-.785-1.75-1.75-1.75h-1.765l-1.249-1.249c-.681-.68-1.791-.681-2.474,0l-1.248,1.248h-1.765c-.965,0-1.75,.785-1.75,1.75v1.765l-1.249,1.249c-.681,.682-.681,1.792,0,2.474l1.248,1.248v1.765c0,.965,.785,1.75,1.75,1.75h1.765l1.249,1.249c.341,.34,.789,.511,1.237,.511s.896-.17,1.237-.511l1.248-1.248h1.765c.965,0,1.75-.785,1.75-1.75v-1.765l1.249-1.249c.681-.682,.681-1.792,0-2.474Zm-3.784-.8l-3.923,5c-.136,.174-.343,.279-.564,.287-.009,0-.017,0-.026,0-.212,0-.414-.089-.557-.247l-1.827-2.023c-.277-.308-.253-.782,.054-1.06,.307-.277,.782-.253,1.06,.054l1.23,1.362,3.374-4.299c.256-.326,.727-.383,1.053-.127,.326,.255,.383,.727,.127,1.053Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/badge-check2.tsx b/packages/ui/src/icons/nucleo/badge-check2.tsx
new file mode 100644
index 00000000000..94ae8d7c21b
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/badge-check2.tsx
@@ -0,0 +1,44 @@
+import { SVGProps } from "react";
+
+export function BadgeCheck2({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <path
+            d="M16.249,7.763s0,0,0,0l-1.248-1.248v-1.765c0-.965-.785-1.75-1.75-1.75h-1.765l-1.249-1.249c-.681-.68-1.791-.681-2.474,0l-1.248,1.248h-1.765c-.965,0-1.75,.785-1.75,1.75v1.765l-1.249,1.249c-.681,.682-.681,1.792,0,2.474l1.248,1.248v1.765c0,.965,.785,1.75,1.75,1.75h1.765l1.249,1.249c.341,.34,.789,.511,1.237,.511s.896-.17,1.237-.511l1.248-1.248h1.765c.965,0,1.75-.785,1.75-1.75v-1.765l1.249-1.249c.681-.682,.681-1.792,0-2.474Zm-3.784-.8l-3.923,5c-.136,.174-.343,.279-.564,.287-.009,0-.017,0-.026,0-.212,0-.414-.089-.557-.247l-1.827-2.023c-.277-.308-.253-.782,.054-1.06,.307-.277,.782-.253,1.06,.054l1.23,1.362,3.374-4.299c.256-.326,.727-.383,1.053-.127,.326,.255,.383,.727,.127,1.053Z"
+            fill="currentColor"
+          />
+        ) : (
+          <>
+            <path
+              d="M15.718,8.293l-1.468-1.468v-2.075c0-.552-.448-1-1-1h-2.075l-1.468-1.468c-.391-.39-1.024-.39-1.414,0l-1.468,1.468h-2.075c-.552,0-1,.448-1,1v2.075l-1.468,1.468c-.391,.39-.391,1.024,0,1.414l1.468,1.468v2.075c0,.552,.448,1,1,1h2.075l1.468,1.468c.391,.39,1.024,.39,1.414,0l1.468-1.468h2.075c.552,0,1-.448,1-1v-2.075l1.468-1.468c.391-.39,.391-1.024,0-1.414Z"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+            <polyline
+              fill="none"
+              points="6.125 9.477 7.952 11.5 11.875 6.5"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+          </>
+        )}
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/bolt-fill.tsx b/packages/ui/src/icons/nucleo/bolt-fill.tsx
deleted file mode 100644
index 2348de2a8f7..00000000000
--- a/packages/ui/src/icons/nucleo/bolt-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function BoltFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M14.922,7.657c-.218-.405-.64-.657-1.1-.657h-3.969l.752-5.83c.061-.464-.204-.902-.643-1.065-.438-.164-.926-.004-1.184,.387L3.134,9.063c-.253,.384-.274,.875-.056,1.28s.64,.657,1.1,.657h3.969l-.752,5.83c-.061,.464,.204,.902,.643,1.065,.115,.043,.234,.064,.352,.064,.328,0,.642-.162,.832-.45h0s5.645-8.572,5.645-8.572c.253-.384,.274-.875,.056-1.28Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/bolt.tsx b/packages/ui/src/icons/nucleo/bolt.tsx
index bdc2b19bdec..08e40aab12c 100644
--- a/packages/ui/src/icons/nucleo/bolt.tsx
+++ b/packages/ui/src/icons/nucleo/bolt.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Bolt(props: SVGProps<SVGSVGElement>) {
+export function Bolt({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,14 +13,25 @@ export function Bolt(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <path
-          d="m8.597,16.41l5.872-8.265c.118-.166,0-.395-.204-.395h-5.016l.604-5.98c.037-.26-.299-.394-.451-.18L3.531,9.855c-.118.166,0,.395.204.395h5.016l-.604,5.98c-.037.26.299.394.451.18Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M14.922,7.657c-.218-.405-.64-.657-1.1-.657h-3.969l.752-5.83c.061-.464-.204-.902-.643-1.065-.438-.164-.926-.004-1.184,.387L3.134,9.063c-.253,.384-.274,.875-.056,1.28s.64,.657,1.1,.657h3.969l-.752,5.83c-.061,.464,.204,.902,.643,1.065,.115,.043,.234,.064,.352,.064,.328,0,.642-.162,.832-.45h0s5.645-8.572,5.645-8.572c.253-.384,.274-.875,.056-1.28Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <path
+            d="m8.597,16.41l5.872-8.265c.118-.166,0-.395-.204-.395h-5.016l.604-5.98c.037-.26-.299-.394-.451-.18L3.531,9.855c-.118.166,0,.395.204.395h5.016l-.604,5.98c-.037.26.299.394.451.18Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/book2-fill.tsx b/packages/ui/src/icons/nucleo/book2-fill.tsx
deleted file mode 100644
index 430b4312b3d..00000000000
--- a/packages/ui/src/icons/nucleo/book2-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function Book2Fill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M15.923,13.069c.006-.013,.015-.023,.02-.036,.034-.083,.049-.169,.052-.258,0-.009,.005-.016,.005-.025V1.75c0-.414-.336-.75-.75-.75H4.75c-1.517,0-2.75,1.233-2.75,2.75V14.5c0,1.378,1.121,2.5,2.5,2.5H15.25c.286,0,.547-.163,.673-.419s.096-.562-.079-.789c-.522-.679-.434-2.013,.004-2.589,.032-.042,.053-.088,.075-.135ZM8.75,4.5h3.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75h-3.5c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75Zm0,3h3.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75h-3.5c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75ZM3.5,3.75c0-.689,.561-1.25,1.25-1.25h.25V12h-.5c-.356,0-.693,.077-1,.212V3.75ZM14.092,15.5H4.5c-.552,0-1-.449-1-1s.448-1,1-1H14.105c-.155,.629-.174,1.339-.014,2Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/book2.tsx b/packages/ui/src/icons/nucleo/book2.tsx
index 3068fb98770..e47df771972 100644
--- a/packages/ui/src/icons/nucleo/book2.tsx
+++ b/packages/ui/src/icons/nucleo/book2.tsx
@@ -1,58 +1,78 @@
 import { SVGProps } from "react";
 
-export function Book2(props: SVGProps<SVGSVGElement>) {
+export function Book2({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
-    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <g fill="currentColor">
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="5.75"
-          x2="5.75"
-          y1="1.75"
-          y2="12.75"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="8.75"
-          x2="12.25"
-          y1="5.25"
-          y2="5.25"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="8.75"
-          x2="12.25"
-          y1="8.25"
-          y2="8.25"
-        />
-        <path
-          d="M2.75,14.5V3.75c0-1.105,.895-2,2-2H15.25V12.75"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M5.25,16.25h-.75c-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75H15.25c-.641,.844-.734,2.547,0,3.5H5.25Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M15.923,13.069c.006-.013,.015-.023,.02-.036,.034-.083,.049-.169,.052-.258,0-.009,.005-.016,.005-.025V1.75c0-.414-.336-.75-.75-.75H4.75c-1.517,0-2.75,1.233-2.75,2.75V14.5c0,1.378,1.121,2.5,2.5,2.5H15.25c.286,0,.547-.163,.673-.419s.096-.562-.079-.789c-.522-.679-.434-2.013,.004-2.589,.032-.042,.053-.088,.075-.135ZM8.75,4.5h3.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75h-3.5c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75Zm0,3h3.5c.414,0,.75,.336,.75,.75s-.336,.75-.75,.75h-3.5c-.414,0-.75-.336-.75-.75s.336-.75,.75-.75ZM3.5,3.75c0-.689,.561-1.25,1.25-1.25h.25V12h-.5c-.356,0-.693,.077-1,.212V3.75ZM14.092,15.5H4.5c-.552,0-1-.449-1-1s.448-1,1-1H14.105c-.155,.629-.174,1.339-.014,2Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="5.75"
+            x2="5.75"
+            y1="1.75"
+            y2="12.75"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="8.75"
+            x2="12.25"
+            y1="5.25"
+            y2="5.25"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="8.75"
+            x2="12.25"
+            y1="8.25"
+            y2="8.25"
+            />
+            <path
+            d="M2.75,14.5V3.75c0-1.105,.895-2,2-2H15.25V12.75"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M5.25,16.25h-.75c-.966,0-1.75-.783-1.75-1.75s.784-1.75,1.75-1.75H15.25c-.641,.844-.734,2.547,0,3.5H5.25Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/briefcase-fill.tsx b/packages/ui/src/icons/nucleo/briefcase-fill.tsx
deleted file mode 100644
index 33c5e9ac2d8..00000000000
--- a/packages/ui/src/icons/nucleo/briefcase-fill.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { SVGProps } from "react";
-
-export function BriefcaseFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M11.75,5.5c-.414,0-.75-.336-.75-.75V2.25c0-.138-.112-.25-.25-.25h-3.5c-.138,0-.25,.112-.25,.25v2.5c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75V2.25c0-.965,.785-1.75,1.75-1.75h3.5c.965,0,1.75,.785,1.75,1.75v2.5c0,.414-.336,.75-.75,.75Z"
-          fill="currentColor"
-        />
-        <rect
-          height="12"
-          width="16"
-          fill="currentColor"
-          rx="2.75"
-          ry="2.75"
-          x="1"
-          y="4"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/briefcase.tsx b/packages/ui/src/icons/nucleo/briefcase.tsx
new file mode 100644
index 00000000000..b909a26e979
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/briefcase.tsx
@@ -0,0 +1,60 @@
+import { SVGProps } from "react";
+
+export function Briefcase({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <>
+            <path
+              d="M11.75,5.5c-.414,0-.75-.336-.75-.75V2.25c0-.138-.112-.25-.25-.25h-3.5c-.138,0-.25,.112-.25,.25v2.5c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75V2.25c0-.965,.785-1.75,1.75-1.75h3.5c.965,0,1.75,.785,1.75,1.75v2.5c0,.414-.336,.75-.75,.75Z"
+              fill="currentColor"
+            />
+            <rect
+              height="12"
+              width="16"
+              fill="currentColor"
+              rx="2.75"
+              ry="2.75"
+              x="1"
+              y="4"
+            />
+          </>
+        ) : (
+          <>
+            <path
+              d="M11.75,5.5c-.414,0-.75-.336-.75-.75V2.25c0-.138-.112-.25-.25-.25h-3.5c-.138,0-.25,.112-.25,.25v2.5c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75V2.25c0-.965,.785-1.75,1.75-1.75h3.5c.965,0,1.75,.785,1.75,1.75v2.5c0,.414-.336,.75-.75,.75Z"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+            <rect
+              height="12"
+              width="16"
+              fill="none"
+              rx="2.75"
+              ry="2.75"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+              x="1"
+              y="4"
+            />
+          </>
+        )}
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/bullet-list-fill.tsx b/packages/ui/src/icons/nucleo/bullet-list-fill.tsx
deleted file mode 100644
index 4b0e3b51ca1..00000000000
--- a/packages/ui/src/icons/nucleo/bullet-list-fill.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { SVGProps } from "react";
-
-export function BulletListFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M15.75,10.5h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
-          fill="currentColor"
-        />
-        <path
-          d="M15.75,14h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
-          fill="currentColor"
-        />
-        <path
-          d="M15.75,3.5h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
-          fill="currentColor"
-        />
-        <path
-          d="M15.75,7h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
-          fill="currentColor"
-        />
-        <circle cx="3.75" cy="4.25" fill="currentColor" r="2.25" />
-        <circle cx="3.75" cy="11.25" fill="currentColor" r="2.25" />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/bullet-list.tsx b/packages/ui/src/icons/nucleo/bullet-list.tsx
index 4ea2af2beab..79f855aea1c 100644
--- a/packages/ui/src/icons/nucleo/bullet-list.tsx
+++ b/packages/ui/src/icons/nucleo/bullet-list.tsx
@@ -1,73 +1,107 @@
 import { SVGProps } from "react";
 
-export function BulletList(props: SVGProps<SVGSVGElement>) {
+export function BulletList({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
-    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <g fill="currentColor">
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="8.25"
-          x2="15.75"
-          y1="11.25"
-          y2="11.25"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="8.25"
-          x2="15.75"
-          y1="14.75"
-          y2="14.75"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="8.25"
-          x2="15.75"
-          y1="4.25"
-          y2="4.25"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="8.25"
-          x2="15.75"
-          y1="7.75"
-          y2="7.75"
-        />
-        <circle
-          cx="3.75"
-          cy="4.25"
-          fill="none"
-          r="1.5"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <circle
-          cx="3.75"
-          cy="11.25"
-          fill="none"
-          r="1.5"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M15.75,10.5h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
+            fill="currentColor"
+            />
+            <path
+            d="M15.75,14h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
+            fill="currentColor"
+            />
+            <path
+            d="M15.75,3.5h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
+            fill="currentColor"
+            />
+            <path
+            d="M15.75,7h-7.5c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h7.5c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Z"
+            fill="currentColor"
+            />
+            <circle cx="3.75" cy="4.25" fill="currentColor" r="2.25" />
+            <circle cx="3.75" cy="11.25" fill="currentColor" r="2.25" />
+          </>
+        ) : (
+          <>
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="8.25"
+            x2="15.75"
+            y1="11.25"
+            y2="11.25"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="8.25"
+            x2="15.75"
+            y1="14.75"
+            y2="14.75"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="8.25"
+            x2="15.75"
+            y1="4.25"
+            y2="4.25"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="8.25"
+            x2="15.75"
+            y1="7.75"
+            y2="7.75"
+            />
+            <circle
+            cx="3.75"
+            cy="4.25"
+            fill="none"
+            r="1.5"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <circle
+            cx="3.75"
+            cy="11.25"
+            fill="none"
+            r="1.5"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/caret-up-fill.tsx b/packages/ui/src/icons/nucleo/caret-up-fill.tsx
deleted file mode 100644
index c8c8cba3e77..00000000000
--- a/packages/ui/src/icons/nucleo/caret-up-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function CaretUpFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M10.478,3.389c-.323-.509-.875-.812-1.478-.812s-1.155,.304-1.478,.812L2.497,11.313c-.341,.539-.362,1.222-.055,1.781s.895,.906,1.533,.906H14.024c.638,0,1.226-.347,1.533-.906s.287-1.242-.055-1.781L10.478,3.389Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/caret-up.tsx b/packages/ui/src/icons/nucleo/caret-up.tsx
new file mode 100644
index 00000000000..ad4313b800b
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/caret-up.tsx
@@ -0,0 +1,34 @@
+import { SVGProps } from "react";
+
+export function CaretUp({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <path
+            d="M10.478,3.389c-.323-.509-.875-.812-1.478-.812s-1.155,.304-1.478,.812L2.497,11.313c-.341,.539-.362,1.222-.055,1.781s.895,.906,1.533,.906H14.024c.638,0,1.226-.347,1.533-.906s.287-1.242-.055-1.781L10.478,3.389Z"
+            fill="currentColor"
+          />
+        ) : (
+          <polyline
+            fill="none"
+            points="2.75 11.5 9 5.25 15.25 11.5"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+          />
+        )}
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/checkbox-checked-fill.tsx b/packages/ui/src/icons/nucleo/checkbox-checked-fill.tsx
deleted file mode 100644
index 0f42b270a14..00000000000
--- a/packages/ui/src/icons/nucleo/checkbox-checked-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function CheckboxCheckedFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M13.25,2H4.75c-1.517,0-2.75,1.233-2.75,2.75V13.25c0,1.517,1.233,2.75,2.75,2.75H13.25c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-.407,4.708l-4.25,5.5c-.136,.176-.343,.283-.565,.291-.01,0-.019,0-.028,0-.212,0-.415-.09-.558-.248l-2.25-2.5c-.277-.308-.252-.782,.056-1.06,.309-.276,.782-.252,1.06,.056l1.648,1.832,3.701-4.789c.252-.328,.726-.388,1.052-.135,.328,.253,.388,.724,.135,1.052Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/checkbox-unchecked.tsx b/packages/ui/src/icons/nucleo/checkbox-unchecked.tsx
deleted file mode 100644
index 5baca6df74b..00000000000
--- a/packages/ui/src/icons/nucleo/checkbox-unchecked.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { SVGProps } from "react";
-
-export function CheckboxUnchecked(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <rect
-          height="12.5"
-          width="12.5"
-          fill="none"
-          rx="2"
-          ry="2"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x="2.75"
-          y="2.75"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/checkbox.tsx b/packages/ui/src/icons/nucleo/checkbox.tsx
new file mode 100644
index 00000000000..634f577011c
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/checkbox.tsx
@@ -0,0 +1,39 @@
+import { SVGProps } from "react";
+
+export function CheckboxIcon({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <path
+            d="M13.25,2H4.75c-1.517,0-2.75,1.233-2.75,2.75V13.25c0,1.517,1.233,2.75,2.75,2.75H13.25c1.517,0,2.75-1.233,2.75-2.75V4.75c0-1.517-1.233-2.75-2.75-2.75Zm-.407,4.708l-4.25,5.5c-.136,.176-.343,.283-.565,.291-.01,0-.019,0-.028,0-.212,0-.415-.09-.558-.248l-2.25-2.5c-.277-.308-.252-.782,.056-1.06,.309-.276,.782-.252,1.06,.056l1.648,1.832,3.701-4.789c.252-.328,.726-.388,1.052-.135,.328,.253,.388,.724,.135,1.052Z"
+            fill="currentColor"
+          />
+        ) : (
+          <rect
+            height="12.5"
+            width="12.5"
+            fill="none"
+            rx="2"
+            ry="2"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x="2.75"
+            y="2.75"
+          />
+        )}
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/circle-check-fill.tsx b/packages/ui/src/icons/nucleo/circle-check-fill.tsx
deleted file mode 100644
index f5ce1788dd1..00000000000
--- a/packages/ui/src/icons/nucleo/circle-check-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function CircleCheckFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm3.843,5.708l-4.25,5.5c-.136,.176-.343,.283-.565,.291-.01,0-.019,0-.028,0-.212,0-.415-.09-.558-.248l-2.25-2.5c-.277-.308-.252-.782,.056-1.06,.309-.276,.781-.252,1.06,.056l1.648,1.832,3.701-4.789c.253-.328,.725-.388,1.052-.135,.328,.253,.388,.724,.135,1.052Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/circle-check.tsx b/packages/ui/src/icons/nucleo/circle-check.tsx
index c54bd517763..d314b277a83 100644
--- a/packages/ui/src/icons/nucleo/circle-check.tsx
+++ b/packages/ui/src/icons/nucleo/circle-check.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function CircleCheck(props: SVGProps<SVGSVGElement>) {
+export function CircleCheck({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,24 +13,35 @@ export function CircleCheck(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <circle
-          cx="9"
-          cy="9"
-          fill="none"
-          r="7.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <polyline
-          fill="none"
-          points="5.75 9.25 8 11.75 12.25 6.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm3.843,5.708l-4.25,5.5c-.136,.176-.343,.283-.565,.291-.01,0-.019,0-.028,0-.212,0-.415-.09-.558-.248l-2.25-2.5c-.277-.308-.252-.782,.056-1.06,.309-.276,.781-.252,1.06,.056l1.648,1.832,3.701-4.789c.253-.328,.725-.388,1.052-.135,.328,.253,.388,.724,.135,1.052Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <circle
+            cx="9"
+            cy="9"
+            fill="none"
+            r="7.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <polyline
+            fill="none"
+            points="5.75 9.25 8 11.75 12.25 6.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/circle-play-fill.tsx b/packages/ui/src/icons/nucleo/circle-play-fill.tsx
deleted file mode 100644
index b3cf2895455..00000000000
--- a/packages/ui/src/icons/nucleo/circle-play-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function CirclePlayFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm2.778,8.648l-3.65,2.129c-.118,.069-.248,.104-.378,.104-.128,0-.256-.034-.374-.101-.236-.135-.376-.378-.376-.65V6.871c0-.272,.141-.515,.376-.65,.236-.136,.517-.134,.751,.002l3.65,2.129c.233,.136,.373,.378,.373,.648s-.139,.512-.373,.648Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/circle-play.tsx b/packages/ui/src/icons/nucleo/circle-play.tsx
index 34a9356fa65..d74eb98fe56 100644
--- a/packages/ui/src/icons/nucleo/circle-play.tsx
+++ b/packages/ui/src/icons/nucleo/circle-play.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function CirclePlay(props: SVGProps<SVGSVGElement>) {
+export function CirclePlay({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,24 +13,35 @@ export function CirclePlay(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <path
-          d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <circle
-          cx="9"
-          cy="9"
-          fill="none"
-          r="7.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M9,1C4.589,1,1,4.589,1,9s3.589,8,8,8,8-3.589,8-8S13.411,1,9,1Zm2.778,8.648l-3.65,2.129c-.118,.069-.248,.104-.378,.104-.128,0-.256-.034-.374-.101-.236-.135-.376-.378-.376-.65V6.871c0-.272,.141-.515,.376-.65,.236-.136,.517-.134,.751,.002l3.65,2.129c.233,.136,.373,.378,.373,.648s-.139,.512-.373,.648Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <path
+            d="M11.652,8.568l-3.651-2.129c-.333-.194-.752,.046-.752,.432v4.259c0,.386,.419,.626,.752,.432l3.651-2.129c.331-.193,.331-.671,0-.864Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <circle
+            cx="9"
+            cy="9"
+            fill="none"
+            r="7.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/connected-dots-fill.tsx b/packages/ui/src/icons/nucleo/connected-dots-fill.tsx
deleted file mode 100644
index 70e060345a0..00000000000
--- a/packages/ui/src/icons/nucleo/connected-dots-fill.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { SVGProps } from "react";
-
-export function ConnectedDotsFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g fill="currentColor">
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="7.954"
-          x2="5.047"
-          y1="5.988"
-          y2="11.511"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="10.046"
-          x2="12.953"
-          y1="5.988"
-          y2="11.511"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="6.25"
-          x2="11.75"
-          y1="13.25"
-          y2="13.25"
-        />
-        <circle
-          cx="9"
-          cy="4"
-          fill="currentColor"
-          r="2.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <circle
-          cx="14"
-          cy="13.5"
-          fill="currentColor"
-          r="2.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <circle
-          cx="4"
-          cy="13.5"
-          fill="currentColor"
-          r="2.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/connected-dots.tsx b/packages/ui/src/icons/nucleo/connected-dots.tsx
index 1574ac2deb8..3650fd680fa 100644
--- a/packages/ui/src/icons/nucleo/connected-dots.tsx
+++ b/packages/ui/src/icons/nucleo/connected-dots.tsx
@@ -1,72 +1,151 @@
 import { SVGProps } from "react";
 
-export function ConnectedDots(props: SVGProps<SVGSVGElement>) {
+export function ConnectedDots({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
-    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <g fill="currentColor">
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="7.954"
-          x2="5.047"
-          y1="5.988"
-          y2="11.511"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="10.046"
-          x2="12.953"
-          y1="5.988"
-          y2="11.511"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="6.25"
-          x2="11.75"
-          y1="13.25"
-          y2="13.25"
-        />
-        <circle
-          cx="9"
-          cy="4"
-          fill="none"
-          r="2.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <circle
-          cx="14"
-          cy="13.5"
-          fill="none"
-          r="2.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <circle
-          cx="4"
-          cy="13.5"
-          fill="none"
-          r="2.25"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="7.954"
+            x2="5.047"
+            y1="5.988"
+            y2="11.511"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="10.046"
+            x2="12.953"
+            y1="5.988"
+            y2="11.511"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="6.25"
+            x2="11.75"
+            y1="13.25"
+            y2="13.25"
+            />
+            <circle
+            cx="9"
+            cy="4"
+            fill="currentColor"
+            r="2.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <circle
+            cx="14"
+            cy="13.5"
+            fill="currentColor"
+            r="2.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <circle
+            cx="4"
+            cy="13.5"
+            fill="currentColor"
+            r="2.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        ) : (
+          <>
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="7.954"
+            x2="5.047"
+            y1="5.988"
+            y2="11.511"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="10.046"
+            x2="12.953"
+            y1="5.988"
+            y2="11.511"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="6.25"
+            x2="11.75"
+            y1="13.25"
+            y2="13.25"
+            />
+            <circle
+            cx="9"
+            cy="4"
+            fill="none"
+            r="2.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <circle
+            cx="14"
+            cy="13.5"
+            fill="none"
+            r="2.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <circle
+            cx="4"
+            cy="13.5"
+            fill="none"
+            r="2.25"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/cube-settings-fill.tsx b/packages/ui/src/icons/nucleo/cube-settings-fill.tsx
deleted file mode 100644
index ef785ee4027..00000000000
--- a/packages/ui/src/icons/nucleo/cube-settings-fill.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SVGProps } from "react";
-
-export function CubeSettingsFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M17,13h-.878c-.044-.138-.098-.271-.164-.397l.62-.621c.293-.293,.293-.768,0-1.061-.294-.293-.769-.292-1.061,0l-.62,.621c-.127-.066-.259-.121-.397-.164v-.878c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v.878c-.138,.044-.271,.098-.397,.164l-.62-.621c-.292-.292-.767-.293-1.061,0-.293,.292-.293,.768,0,1.061l.62,.621c-.066,.127-.12,.259-.164,.397h-.878c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h.878c.044,.138,.098,.271,.164,.397l-.62,.621c-.293,.293-.293,.768,0,1.061,.146,.146,.339,.22,.53,.22,.192,0,.384-.073,.53-.22l.62-.621c.127,.066,.259,.121,.397,.164v.878c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-.878c.138-.044,.271-.098,.397-.164l.62,.621c.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22,.293-.292,.293-.768,0-1.061l-.62-.621c.066-.127,.12-.259,.164-.397h.878c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-2.25,.75c0,.551-.448,1-1,1s-1-.449-1-1,.448-1,1-1,1,.449,1,1Z"
-          fill="currentColor"
-        />
-        <path
-          d="M8.75,14.983v-5.551l4.75-2.755v1.383c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.533c0-.977-.524-1.888-1.37-2.379L9.38,1.683c-.852-.493-1.908-.493-2.76,0L2.369,4.148c-.845,.491-1.369,1.402-1.369,2.379v4.945c0,.977,.524,1.888,1.37,2.379l4.25,2.465c.425,.246,.896,.37,1.368,.37,.449,0,.9-.112,1.315-.335,.365-.197,.501-.651,.305-1.016-.169-.314-.529-.444-.858-.352Zm-5.627-2.428c-.385-.223-.623-.638-.623-1.082V6.677l4.75,2.755v5.516l-4.127-2.394Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/cube-settings.tsx b/packages/ui/src/icons/nucleo/cube-settings.tsx
index 479e7eeecb8..d1d9184afcd 100644
--- a/packages/ui/src/icons/nucleo/cube-settings.tsx
+++ b/packages/ui/src/icons/nucleo/cube-settings.tsx
@@ -1,134 +1,158 @@
 import { SVGProps } from "react";
 
-export function CubeSettings(props: SVGProps<SVGSVGElement>) {
+export function CubeSettings({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
-    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
       <g fill="currentColor">
-        <polyline
-          fill="none"
-          points="13.983 5.53 8 9 2.017 5.53"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="8"
-          x2="8"
-          y1="15.938"
-          y2="9"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="13.75"
-          x2="13.75"
-          y1="10.5"
-          y2="11.75"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="16.048"
-          x2="15.164"
-          y1="11.452"
-          y2="12.336"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="17"
-          x2="15.75"
-          y1="13.75"
-          y2="13.75"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="16.048"
-          x2="15.164"
-          y1="16.048"
-          y2="15.164"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="13.75"
-          x2="13.75"
-          y1="17"
-          y2="15.75"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="11.452"
-          x2="12.336"
-          y1="16.048"
-          y2="15.164"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="10.5"
-          x2="11.75"
-          y1="13.75"
-          y2="13.75"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="11.452"
-          x2="12.336"
-          y1="11.452"
-          y2="12.336"
-        />
-        <circle
-          cx="13.75"
-          cy="13.75"
-          fill="none"
-          r="1.75"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M14.25,8.06v-1.533c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0L2.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.603,.35,1.341,.353,1.951,.023"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M17,13h-.878c-.044-.138-.098-.271-.164-.397l.62-.621c.293-.293,.293-.768,0-1.061-.294-.293-.769-.292-1.061,0l-.62,.621c-.127-.066-.259-.121-.397-.164v-.878c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75v.878c-.138,.044-.271,.098-.397,.164l-.62-.621c-.292-.292-.767-.293-1.061,0-.293,.292-.293,.768,0,1.061l.62,.621c-.066,.127-.12,.259-.164,.397h-.878c-.414,0-.75,.336-.75,.75s.336,.75,.75,.75h.878c.044,.138,.098,.271,.164,.397l-.62,.621c-.293,.293-.293,.768,0,1.061,.146,.146,.339,.22,.53,.22,.192,0,.384-.073,.53-.22l.62-.621c.127,.066,.259,.121,.397,.164v.878c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-.878c.138-.044,.271-.098,.397-.164l.62,.621c.146,.146,.338,.22,.53,.22,.191,0,.384-.073,.53-.22,.293-.292,.293-.768,0-1.061l-.62-.621c.066-.127,.12-.259,.164-.397h.878c.414,0,.75-.336,.75-.75s-.336-.75-.75-.75Zm-2.25,.75c0,.551-.448,1-1,1s-1-.449-1-1,.448-1,1-1,1,.449,1,1Z"
+            fill="currentColor"
+            />
+            <path
+            d="M8.75,14.983v-5.551l4.75-2.755v1.383c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.533c0-.977-.524-1.888-1.37-2.379L9.38,1.683c-.852-.493-1.908-.493-2.76,0L2.369,4.148c-.845,.491-1.369,1.402-1.369,2.379v4.945c0,.977,.524,1.888,1.37,2.379l4.25,2.465c.425,.246,.896,.37,1.368,.37,.449,0,.9-.112,1.315-.335,.365-.197,.501-.651,.305-1.016-.169-.314-.529-.444-.858-.352Zm-5.627-2.428c-.385-.223-.623-.638-.623-1.082V6.677l4.75,2.755v5.516l-4.127-2.394Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <polyline
+            fill="none"
+            points="13.983 5.53 8 9 2.017 5.53"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="8"
+            x2="8"
+            y1="15.938"
+            y2="9"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="13.75"
+            x2="13.75"
+            y1="10.5"
+            y2="11.75"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="16.048"
+            x2="15.164"
+            y1="11.452"
+            y2="12.336"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="17"
+            x2="15.75"
+            y1="13.75"
+            y2="13.75"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="16.048"
+            x2="15.164"
+            y1="16.048"
+            y2="15.164"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="13.75"
+            x2="13.75"
+            y1="17"
+            y2="15.75"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="11.452"
+            x2="12.336"
+            y1="16.048"
+            y2="15.164"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="10.5"
+            x2="11.75"
+            y1="13.75"
+            y2="13.75"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="11.452"
+            x2="12.336"
+            y1="11.452"
+            y2="12.336"
+            />
+            <circle
+            cx="13.75"
+            cy="13.75"
+            fill="none"
+            r="1.75"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M14.25,8.06v-1.533c0-.713-.38-1.372-.997-1.73l-4.25-2.465c-.621-.36-1.386-.36-2.007,0L2.747,4.797c-.617,.358-.997,1.017-.997,1.73v4.946c0,.713,.38,1.372,.997,1.73l4.25,2.465c.603,.35,1.341,.353,1.951,.023"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/diamond-turn-right-fill.tsx b/packages/ui/src/icons/nucleo/diamond-turn-right-fill.tsx
deleted file mode 100644
index ad3cd499de4..00000000000
--- a/packages/ui/src/icons/nucleo/diamond-turn-right-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function DiamondTurnRightFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M16.116,7.056L10.944,1.884c-1.038-1.039-2.851-1.039-3.889,0L1.884,7.056c-.52,.519-.806,1.21-.806,1.944s.286,1.425,.806,1.944l5.171,5.171c.519,.52,1.209,.806,1.944,.806s1.425-.286,1.944-.806l5.171-5.171c.52-.519,.806-1.209,.806-1.944s-.286-1.425-.806-1.944Zm-3.335,2.225l-2.25,2.25c-.146,.146-.338,.22-.53,.22s-.384-.073-.53-.22c-.293-.293-.293-.768,0-1.061l.97-.97h-1.689c-.689,0-1.25,.561-1.25,1.25v.5c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75v-.5c0-1.517,1.233-2.75,2.75-2.75h1.689l-.97-.97c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l2.25,2.25c.293,.293,.293,.768,0,1.061Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/diamond-turn-right.tsx b/packages/ui/src/icons/nucleo/diamond-turn-right.tsx
index 8508e8f4c97..50f86a7bd4d 100644
--- a/packages/ui/src/icons/nucleo/diamond-turn-right.tsx
+++ b/packages/ui/src/icons/nucleo/diamond-turn-right.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function DiamondTurnRight(props: SVGProps<SVGSVGElement>) {
+export function DiamondTurnRight({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,36 +13,47 @@ export function DiamondTurnRight(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <polyline
-          fill="none"
-          points="10 6.5 12.25 8.75 10 11"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M12.25,8.75h-3.5c-1.105,0-2,.895-2,2v.5"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <rect
-          height="11.313"
-          width="11.313"
-          fill="none"
-          rx="2"
-          ry="2"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          transform="translate(21.728 9) rotate(135)"
-          x="3.343"
-          y="3.343"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M16.116,7.056L10.944,1.884c-1.038-1.039-2.851-1.039-3.889,0L1.884,7.056c-.52,.519-.806,1.21-.806,1.944s.286,1.425,.806,1.944l5.171,5.171c.519,.52,1.209,.806,1.944,.806s1.425-.286,1.944-.806l5.171-5.171c.52-.519,.806-1.209,.806-1.944s-.286-1.425-.806-1.944Zm-3.335,2.225l-2.25,2.25c-.146,.146-.338,.22-.53,.22s-.384-.073-.53-.22c-.293-.293-.293-.768,0-1.061l.97-.97h-1.689c-.689,0-1.25,.561-1.25,1.25v.5c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75v-.5c0-1.517,1.233-2.75,2.75-2.75h1.689l-.97-.97c-.293-.293-.293-.768,0-1.061s.768-.293,1.061,0l2.25,2.25c.293,.293,.293,.768,0,1.061Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <polyline
+            fill="none"
+            points="10 6.5 12.25 8.75 10 11"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M12.25,8.75h-3.5c-1.105,0-2,.895-2,2v.5"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <rect
+            height="11.313"
+            width="11.313"
+            fill="none"
+            rx="2"
+            ry="2"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            transform="translate(21.728 9) rotate(135)"
+            x="3.343"
+            y="3.343"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/envelope-fill.tsx b/packages/ui/src/icons/nucleo/envelope-fill.tsx
deleted file mode 100644
index eebbdc96c7b..00000000000
--- a/packages/ui/src/icons/nucleo/envelope-fill.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SVGProps } from "react";
-
-export function EnvelopeFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M8.88,8.827c.074,.042,.166,.042,.24,0l7.777-4.283c-.314-1.173-1.376-2.044-2.647-2.044H3.75c-1.267,0-2.326,.865-2.643,2.033l7.773,4.293Z"
-          fill="currentColor"
-        />
-        <path
-          d="M9.845,10.14c-.264,.146-.554,.219-.844,.219s-.582-.073-.846-.22L1,6.188v6.562c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75V6.2l-7.155,3.94Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/envelope.tsx b/packages/ui/src/icons/nucleo/envelope.tsx
index a1bd8b4befa..849c5ab9437 100644
--- a/packages/ui/src/icons/nucleo/envelope.tsx
+++ b/packages/ui/src/icons/nucleo/envelope.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Envelope(props: SVGProps<SVGSVGElement>) {
+export function Envelope({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,28 +13,43 @@ export function Envelope(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <path
-          d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <rect
-          height="11.5"
-          width="14.5"
-          fill="none"
-          rx="2"
-          ry="2"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          transform="translate(18 18) rotate(180)"
-          x="1.75"
-          y="3.25"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M8.88,8.827c.074,.042,.166,.042,.24,0l7.777-4.283c-.314-1.173-1.376-2.044-2.647-2.044H3.75c-1.267,0-2.326,.865-2.643,2.033l7.773,4.293Z"
+            fill="currentColor"
+            />
+            <path
+            d="M9.845,10.14c-.264,.146-.554,.219-.844,.219s-.582-.073-.846-.22L1,6.188v6.562c0,1.517,1.233,2.75,2.75,2.75H14.25c1.517,0,2.75-1.233,2.75-2.75V6.2l-7.155,3.94Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <path
+            d="M1.75,5.75l6.767,3.733c.301,.166,.665,.166,.966,0l6.767-3.733"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <rect
+            height="11.5"
+            width="14.5"
+            fill="none"
+            rx="2"
+            ry="2"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            transform="translate(18 18) rotate(180)"
+            x="1.75"
+            y="3.25"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/feather-fill.tsx b/packages/ui/src/icons/nucleo/feather-fill.tsx
deleted file mode 100644
index 06fb855bf64..00000000000
--- a/packages/ui/src/icons/nucleo/feather-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function FeatherFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M12.259,10.858c-.36,0-.755-.023-1.192-.069-.412-.043-.71-.413-.667-.825,.043-.412,.409-.711,.825-.667,1.405,.149,2.158,.017,2.695-.311,.502-.418,.899-.998,1.116-1.831,.139-.612,.228-1.204,.313-1.776,.135-.901,.262-1.751,.551-2.256,.139-.242,.132-.542-.019-.777-.15-.235-.417-.373-.697-.343C3.521,3.023,2.019,15.044,2.005,15.165c-.047,.411,.248,.782,.659,.83,.029,.003,.058,.005,.087,.005,.375,0,.7-.282,.744-.664,.017-.143,.174-1.323,.711-2.88,.81,.363,1.612,.523,1.659,.531,.854,.156,1.643,.234,2.367,.234,1.507,0,2.73-.338,3.65-1.01,.506-.37,.898-.847,1.198-1.406-.254,.031-.522,.052-.822,.052Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/feather.tsx b/packages/ui/src/icons/nucleo/feather.tsx
new file mode 100644
index 00000000000..a8fca19f9ca
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/feather.tsx
@@ -0,0 +1,44 @@
+import { SVGProps } from "react";
+
+export function Feather({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <path
+            d="M12.259,10.858c-.36,0-.755-.023-1.192-.069-.412-.043-.71-.413-.667-.825,.043-.412,.409-.711,.825-.667,1.405,.149,2.158,.017,2.695-.311,.502-.418,.899-.998,1.116-1.831,.139-.612,.228-1.204,.313-1.776,.135-.901,.262-1.751,.551-2.256,.139-.242,.132-.542-.019-.777-.15-.235-.417-.373-.697-.343C3.521,3.023,2.019,15.044,2.005,15.165c-.047,.411,.248,.782,.659,.83,.029,.003,.058,.005,.087,.005,.375,0,.7-.282,.744-.664,.017-.143,.174-1.323,.711-2.88,.81,.363,1.612,.523,1.659,.531,.854,.156,1.643,.234,2.367,.234,1.507,0,2.73-.338,3.65-1.01,.506-.37,.898-.847,1.198-1.406-.254,.031-.522,.052-.822,.052Z"
+            fill="currentColor"
+          />
+        ) : (
+          <>
+            <path
+              d="m12.974,8.731c-.4527,3.525-3.4373,4.0684-6.5358,3.5928"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+            <path
+              d="m2.75,15.25S4.062,3.729,15.25,2.75c-.56.976-.573,2.605-.946,4.239-.524,2.011-2.335,2.261-4.554,2.261"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+          </>
+        )}
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/flag-fill.tsx b/packages/ui/src/icons/nucleo/flag-fill.tsx
deleted file mode 100644
index 23b79a7e9e7..00000000000
--- a/packages/ui/src/icons/nucleo/flag-fill.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { SVGProps } from "react";
-
-export function FlagFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 14 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M11.3541 2.00349C11.162 1.90316 10.9302 1.91793 10.7505 2.0416C9.97276 2.58216 9.25098 2.80693 8.62098 2.70971C8.10921 2.63116 7.75843 2.36438 7.35243 2.0556C6.88732 1.70171 6.36154 1.30116 5.55809 1.17827C4.77721 1.05771 3.95587 1.25371 3.11121 1.7266V8.15182C3.15787 8.13471 3.20843 8.13238 3.25043 8.1036C4.02743 7.56305 4.74609 7.33749 5.37998 7.43549C5.89021 7.51405 6.24021 7.78005 6.64543 8.08805C7.11054 8.44193 7.63787 8.84327 8.44365 8.96616C8.59998 8.99027 8.75787 9.00193 8.91809 9.00193C9.71843 9.00193 10.5569 8.70016 11.4171 8.10282C11.5734 7.99393 11.6668 7.81505 11.6668 7.62371V2.52071C11.6668 2.30371 11.5462 2.10382 11.3541 2.00349Z"
-        fill="currentColor"
-      />
-      <path
-        d="M2.91671 13.0282C2.59471 13.0282 2.33337 12.7669 2.33337 12.4449V1.55599C2.33337 1.23399 2.59471 0.972656 2.91671 0.972656C3.23871 0.972656 3.50004 1.23399 3.50004 1.55599V12.4449C3.50004 12.7669 3.23871 13.0282 2.91671 13.0282Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/flag.tsx b/packages/ui/src/icons/nucleo/flag.tsx
index ecf1687faa0..2d5ee93f0b7 100644
--- a/packages/ui/src/icons/nucleo/flag.tsx
+++ b/packages/ui/src/icons/nucleo/flag.tsx
@@ -1,34 +1,53 @@
 import { SVGProps } from "react";
 
-export function Flag(props: SVGProps<SVGSVGElement>) {
+export function Flag({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
-      width="18"
       height="18"
+      width="18"
       viewBox="0 0 18 18"
-      fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
-      <path
-        d="M3.75,10.239c.783-.172,1.975-.337,3.375-.114,1.313,.209,1.823,.604,2.91,.784,.943,.156,2.349,.156,4.215-.67V3.25c-1.79,.962-3.136,1.009-4.031,.875-1.165-.174-1.681-.669-3.094-.938-1.393-.265-2.594-.106-3.375,.062"
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-      />
-      <line
-        fill="none"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.5"
-        x1="3.75"
-        x2="3.75"
-        y1="1.75"
-        y2="16.25"
-      />
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <>
+            <path
+              d="M14.598,2.575c-.247-.129-.545-.11-.776,.049-1,.695-1.928,.984-2.738,.859-.658-.101-1.109-.444-1.631-.841-.598-.455-1.274-.97-2.307-1.128-1.004-.155-2.06,.097-3.146,.705V10.48c.06-.022,.125-.025,.179-.062,.999-.695,1.923-.985,2.738-.859,.656,.101,1.106,.443,1.627,.839,.598,.455,1.276,.971,2.312,1.129,.201,.031,.404,.046,.61,.046,1.029,0,2.107-.388,3.213-1.156,.201-.14,.321-.37,.321-.616V3.24c0-.279-.155-.536-.402-.665Z"
+              fill="currentColor"
+            />
+            <path
+              d="M3.75,16.75c-.414,0-.75-.336-.75-.75V2c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v14c0,.414-.336,.75-.75,.75Z"
+              fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <path
+              d="M3.75,3.24c1.161-.808,2.256-1.142,3.281-.984,1.69,.259,2.245,1.709,3.938,1.969,1.013,.155,2.106-.167,3.281-.984v6.563c-1.175,.818-2.268,1.14-3.281,.984-1.692-.26-2.248-1.71-3.938-1.969-1.026-.157-2.12,.177-3.281,.984"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+            <line
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+              x1="3.75"
+              x2="3.75"
+              y1="2"
+              y2="16"
+            />
+          </>
+        )}
+      </g>
     </svg>
   );
 }
diff --git a/packages/ui/src/icons/nucleo/gift-fill.tsx b/packages/ui/src/icons/nucleo/gift-fill.tsx
deleted file mode 100644
index c5d42dee847..00000000000
--- a/packages/ui/src/icons/nucleo/gift-fill.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { SVGProps } from "react";
-
-export function GiftFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M3,9.5v4.75c0,1.517,1.233,2.75,2.75,2.75h2.5v-7.5H3Z"
-          fill="currentColor"
-        />
-        <path
-          d="M9.75,9.5v7.5h2.5c1.517,0,2.75-1.233,2.75-2.75v-4.75h-5.25Z"
-          fill="currentColor"
-        />
-        <path
-          d="M15.25,4.5h-.462c.135-.307,.212-.644,.212-1,0-1.378-1.121-2.5-2.5-2.5-1.761,0-2.864,1.231-3.5,2.339-.636-1.107-1.739-2.339-3.5-2.339-1.379,0-2.5,1.122-2.5,2.5,0,.356,.077,.693,.212,1h-.462c-.965,0-1.75,.776-1.75,1.75s.785,1.75,1.75,1.75H15.25c.965,0,1.75-.782,1.75-1.75s-.785-1.75-1.75-1.75Zm-2.75-2c.552,0,1,.449,1,1s-.448,1-1,1h-2.419c.405-.86,1.176-2,2.419-2ZM4.5,3.5c0-.551,.448-1,1-1,1.234,0,2.007,1.14,2.415,2h-2.415c-.552,0-1-.449-1-1Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/gift.tsx b/packages/ui/src/icons/nucleo/gift.tsx
index 3233819c445..39e1ff171fb 100644
--- a/packages/ui/src/icons/nucleo/gift.tsx
+++ b/packages/ui/src/icons/nucleo/gift.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Gift(props: SVGProps<SVGSVGElement>) {
+export function Gift({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,54 +13,73 @@ export function Gift(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="9"
-          x2="9"
-          y1="5.25"
-          y2="16.25"
-        />
-        <path
-          d="M3.75,3.5c0-.966,.784-1.75,1.75-1.75,2.589,0,3.5,3.5,3.5,3.5h-3.5c-.966,0-1.75-.784-1.75-1.75Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M12.5,5.25h-3.5s.911-3.5,3.5-3.5c.966,0,1.75,.784,1.75,1.75s-.784,1.75-1.75,1.75Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M14.25,8.25v6c0,1.105-.895,2-2,2H5.75c-1.105,0-2-.895-2-2v-6"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <rect
-          height="3"
-          width="14.5"
-          fill="none"
-          rx="1"
-          ry="1"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x="1.75"
-          y="5.25"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M3,9.5v4.75c0,1.517,1.233,2.75,2.75,2.75h2.5v-7.5H3Z"
+            fill="currentColor"
+            />
+            <path
+            d="M9.75,9.5v7.5h2.5c1.517,0,2.75-1.233,2.75-2.75v-4.75h-5.25Z"
+            fill="currentColor"
+            />
+            <path
+            d="M15.25,4.5h-.462c.135-.307,.212-.644,.212-1,0-1.378-1.121-2.5-2.5-2.5-1.761,0-2.864,1.231-3.5,2.339-.636-1.107-1.739-2.339-3.5-2.339-1.379,0-2.5,1.122-2.5,2.5,0,.356,.077,.693,.212,1h-.462c-.965,0-1.75,.776-1.75,1.75s.785,1.75,1.75,1.75H15.25c.965,0,1.75-.782,1.75-1.75s-.785-1.75-1.75-1.75Zm-2.75-2c.552,0,1,.449,1,1s-.448,1-1,1h-2.419c.405-.86,1.176-2,2.419-2ZM4.5,3.5c0-.551,.448-1,1-1,1.234,0,2.007,1.14,2.415,2h-2.415c-.552,0-1-.449-1-1Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="9"
+            x2="9"
+            y1="5.25"
+            y2="16.25"
+            />
+            <path
+            d="M3.75,3.5c0-.966,.784-1.75,1.75-1.75,2.589,0,3.5,3.5,3.5,3.5h-3.5c-.966,0-1.75-.784-1.75-1.75Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M12.5,5.25h-3.5s.911-3.5,3.5-3.5c.966,0,1.75,.784,1.75,1.75s-.784,1.75-1.75,1.75Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M14.25,8.25v6c0,1.105-.895,2-2,2H5.75c-1.105,0-2-.895-2-2v-6"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <rect
+            height="3"
+            width="14.5"
+            fill="none"
+            rx="1"
+            ry="1"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x="1.75"
+            y="5.25"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/heart-fill.tsx b/packages/ui/src/icons/nucleo/heart-fill.tsx
deleted file mode 100644
index 7c959e321f2..00000000000
--- a/packages/ui/src/icons/nucleo/heart-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function HeartFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M12.164,2c-1.195,.015-2.324,.49-3.164,1.306-.84-.815-1.972-1.291-3.178-1.306-2.53,.015-4.582,2.084-4.572,4.609,0,5.253,5.306,8.429,6.932,9.278,.256,.133,.537,.2,.818,.2s.562-.067,.817-.2c1.626-.848,6.933-4.024,6.933-9.275,.009-2.528-2.042-4.597-4.586-4.612Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/heart.tsx b/packages/ui/src/icons/nucleo/heart.tsx
index 9df44f24ce6..7a4912ba8d2 100644
--- a/packages/ui/src/icons/nucleo/heart.tsx
+++ b/packages/ui/src/icons/nucleo/heart.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Heart(props: SVGProps<SVGSVGElement>) {
+export function Heart({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,14 +13,25 @@ export function Heart(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <path
-          d="M8.529,15.222c.297,.155,.644,.155,.941,0,1.57-.819,6.529-3.787,6.529-8.613,.008-2.12-1.704-3.846-3.826-3.859-1.277,.016-2.464,.66-3.173,1.72-.71-1.06-1.897-1.704-3.173-1.72-2.123,.013-3.834,1.739-3.826,3.859,0,4.826,4.959,7.794,6.529,8.613Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M12.164,2c-1.195,.015-2.324,.49-3.164,1.306-.84-.815-1.972-1.291-3.178-1.306-2.53,.015-4.582,2.084-4.572,4.609,0,5.253,5.306,8.429,6.932,9.278,.256,.133,.537,.2,.818,.2s.562-.067,.817-.2c1.626-.848,6.933-4.024,6.933-9.275,.009-2.528-2.042-4.597-4.586-4.612Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <path
+            d="M8.529,15.222c.297,.155,.644,.155,.941,0,1.57-.819,6.529-3.787,6.529-8.613,.008-2.12-1.704-3.846-3.826-3.859-1.277,.016-2.464,.66-3.173,1.72-.71-1.06-1.897-1.704-3.173-1.72-2.123,.013-3.834,1.739-3.826,3.859,0,4.826,4.959,7.794,6.529,8.613Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/index.ts b/packages/ui/src/icons/nucleo/index.ts
index 58f1e3233e0..87179e07618 100644
--- a/packages/ui/src/icons/nucleo/index.ts
+++ b/packages/ui/src/icons/nucleo/index.ts
@@ -11,42 +11,37 @@ export * from "./arrows-opposite-direction-x";
 export * from "./arrows-opposite-direction-y";
 export * from "./at-sign";
 export * from "./badge-check";
-export * from "./badge-check2-fill";
+export * from "./badge-check2";
 export * from "./bell";
 export * from "./blog";
 export * from "./bolt";
-export * from "./bolt-fill";
 export * from "./book-open";
 export * from "./book2";
-export * from "./book2-fill";
 export * from "./book2-small";
 export * from "./books2";
 export * from "./box-archive";
 export * from "./brackets-curly";
-export * from "./briefcase-fill";
+export * from "./briefcase";
 export * from "./brush";
 export * from "./bullet-list";
-export * from "./bullet-list-fill";
 export * from "./calculator";
 export * from "./calendar";
 export * from "./calendar-days";
 export * from "./calendar-refresh";
 export * from "./calendar6";
 export * from "./cards";
-export * from "./caret-up-fill";
+export * from "./caret-up";
 export * from "./chart-activity2";
 export * from "./chart-area2";
 export * from "./chart-line";
 export * from "./check";
 export * from "./check2";
-export * from "./checkbox-checked-fill";
-export * from "./checkbox-unchecked";
+export { CheckboxIcon } from "./checkbox";
 export * from "./chevron-left";
 export * from "./chevron-right";
 export * from "./chevron-up";
 export * from "./circle-arrow-right";
 export * from "./circle-check";
-export * from "./circle-check-fill";
 export * from "./circle-dollar";
 export * from "./circle-dollar-out";
 export * from "./circle-dollar3";
@@ -56,7 +51,6 @@ export * from "./circle-half-dotted-clock";
 export * from "./circle-info";
 export * from "./circle-percentage";
 export * from "./circle-play";
-export * from "./circle-play-fill";
 export * from "./circle-question";
 export * from "./circle-user";
 export * from "./circle-warning";
@@ -68,7 +62,6 @@ export * from "./cloud-upload";
 export * from "./code";
 export * from "./color-palette2";
 export * from "./connected-dots";
-export * from "./connected-dots-fill";
 export * from "./connected-dots4";
 export * from "./connections3";
 export * from "./credit-card";
@@ -76,13 +69,11 @@ export * from "./crosshairs3";
 export * from "./crown";
 export * from "./cube";
 export * from "./cube-settings";
-export * from "./cube-settings-fill";
 export * from "./currency-dollar";
 export * from "./cursor-rays";
 export * from "./database-key";
 export * from "./desktop";
 export * from "./diamond-turn-right";
-export * from "./diamond-turn-right-fill";
 export * from "./directions";
 export * from "./discount";
 export * from "./dots";
@@ -95,18 +86,16 @@ export * from "./envelope-alert";
 export * from "./envelope-arrow-right";
 export * from "./envelope-ban";
 export * from "./envelope-check";
-export * from "./envelope-fill";
 export * from "./envelope-open";
 export * from "./eye";
 export * from "./eye-slash";
 export * from "./face-smile";
-export * from "./feather-fill";
+export * from "./feather";
 export * from "./file-content";
 export * from "./file-zip2";
 export * from "./filter-bars";
 export * from "./filter2";
 export * from "./flag";
-export * from "./flag-fill";
 export * from "./flag-wavy";
 export * from "./flag2";
 export * from "./flag6";
@@ -125,7 +114,6 @@ export * from "./gear2";
 export * from "./gear3";
 export * from "./gem";
 export * from "./gift";
-export * from "./gift-fill";
 export * from "./globe";
 export * from "./globe-pointer";
 export * from "./globe-search";
@@ -139,7 +127,6 @@ export * from "./heading-1";
 export * from "./heading-2";
 export * from "./headset";
 export * from "./heart";
-export * from "./heart-fill";
 export * from "./hexadecagon-star";
 export * from "./history";
 export * from "./hyperlink";
@@ -156,13 +143,11 @@ export * from "./key";
 export * from "./layout-sidebar";
 export * from "./license";
 export * from "./life-ring";
-export * from "./life-ring-fill";
 export * from "./lines-y";
 export * from "./link-broken";
 export * from "./link4";
 export * from "./location-pin";
 export * from "./lock";
-export * from "./lock-fill";
 export * from "./magnifier";
 export * from "./map-position";
 export * from "./marketing-target";
@@ -171,7 +156,7 @@ export * from "./media-play";
 export * from "./megaphone";
 export * from "./menu3";
 export * from "./message-smile";
-export * from "./microphone-fill";
+export * from "./microphone";
 export * from "./minus";
 export * from "./mobile-phone";
 export * from "./money-bill";
@@ -180,7 +165,6 @@ export * from "./money-bills2";
 export * from "./msg";
 export * from "./msgs";
 export * from "./msgs-dotted";
-export * from "./msgs-fill";
 export * from "./nodes-4";
 export * from "./note";
 export * from "./office-building";
@@ -225,7 +209,6 @@ export * from "./square-user-sparkle2";
 export * from "./square-xmark";
 export * from "./stack-y-3";
 export * from "./star";
-export * from "./star-fill";
 export * from "./stars2";
 export * from "./suitcase";
 export * from "./table-icon";
@@ -237,7 +220,7 @@ export * from "./text-bold";
 export * from "./text-italic";
 export * from "./text-strike";
 export * from "./timer2";
-export * from "./toggle2-fill";
+export * from "./toggle2";
 export * from "./toggles";
 export * from "./trash";
 export * from "./triangle-warning";
@@ -256,7 +239,6 @@ export * from "./user-plus";
 export * from "./user-search";
 export * from "./user-xmark";
 export * from "./users";
-export * from "./users-fill";
 export * from "./users-settings";
 export * from "./users2";
 export * from "./users6";
diff --git a/packages/ui/src/icons/nucleo/life-ring-fill.tsx b/packages/ui/src/icons/nucleo/life-ring-fill.tsx
deleted file mode 100644
index e0cfffc104c..00000000000
--- a/packages/ui/src/icons/nucleo/life-ring-fill.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { SVGProps } from "react";
-
-export function LifeRingFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M6.188,7.951l-1.404-.525c.457-1.223,1.42-2.186,2.643-2.643l.525,1.405c-.815,.305-1.458,.947-1.764,1.763Z"
-          fill="currentColor"
-        />
-        <path
-          d="M11.812,7.951c-.306-.815-.948-1.458-1.764-1.763l.525-1.405c1.223,.457,2.186,1.42,2.643,2.643l-1.404,.525Z"
-          fill="currentColor"
-        />
-        <path
-          d="M10.574,13.217l-.525-1.405c.815-.305,1.458-.947,1.764-1.763l1.404,.525c-.457,1.223-1.42,2.186-2.643,2.643Z"
-          fill="currentColor"
-        />
-        <path
-          d="M7.426,13.217c-1.223-.457-2.186-1.42-2.643-2.643l1.404-.525c.306,.815,.948,1.458,1.764,1.763l-.525,1.405Z"
-          fill="currentColor"
-        />
-        <path
-          d="M6.202,16.497c-2.174-.812-3.887-2.524-4.698-4.699l1.404-.524c.66,1.767,2.052,3.159,3.819,3.818l-.525,1.405Z"
-          fill="currentColor"
-        />
-        <path
-          d="M11.798,16.497l-.525-1.405c1.768-.66,3.159-2.051,3.819-3.818l1.404,.524c-.812,2.175-2.524,3.888-4.698,4.699Z"
-          fill="currentColor"
-        />
-        <path
-          d="M15.091,6.727c-.658-1.767-2.05-3.159-3.818-3.819l.525-1.405c2.175,.812,3.888,2.525,4.699,4.7l-1.406,.524Z"
-          fill="currentColor"
-        />
-        <path
-          d="M2.908,6.727l-1.404-.524c.812-2.175,2.524-3.888,4.698-4.699l.525,1.405c-1.768,.66-3.159,2.051-3.819,3.818Z"
-          fill="currentColor"
-        />
-        <path
-          d="M10.312,6.237c-.087,0-.176-.015-.263-.047-.675-.251-1.429-.251-2.098,0-.188,.069-.394,.062-.574-.021-.181-.083-.321-.233-.392-.42l-1.399-3.749c-.069-.186-.062-.393,.021-.574,.083-.181,.234-.322,.42-.391,1.902-.71,4.045-.71,5.947,0,.388,.145,.585,.577,.44,.965l-1.399,3.75c-.113,.302-.399,.488-.703,.488Z"
-          fill="currentColor"
-        />
-        <path
-          d="M16.263,12.46c-.087,0-.176-.015-.263-.047l-3.749-1.399c-.388-.145-.585-.577-.44-.965,.126-.336,.189-.689,.189-1.049,0-.362-.063-.714-.188-1.047-.07-.187-.062-.393,.02-.575,.083-.181,.233-.322,.42-.392l3.749-1.399c.393-.145,.82,.053,.965,.44,.355,.949,.535,1.95,.535,2.973s-.18,2.024-.535,2.973c-.112,.301-.398,.487-.702,.487Z"
-          fill="currentColor"
-        />
-        <path
-          d="M9,17.5c-1.022,0-2.022-.18-2.974-.535-.388-.145-.585-.577-.44-.965l1.399-3.75c.146-.388,.576-.585,.966-.44,.675,.251,1.429,.251,2.098,0,.187-.07,.393-.063,.574,.021,.181,.083,.321,.233,.392,.42l1.399,3.749c.069,.186,.062,.393-.021,.574-.083,.181-.234,.322-.42,.391-.951,.355-1.951,.535-2.974,.535Z"
-          fill="currentColor"
-        />
-        <path
-          d="M1.737,12.46c-.304,0-.59-.186-.702-.487-.355-.949-.535-1.95-.535-2.973s.18-2.024,.535-2.973c.145-.387,.574-.584,.965-.44l3.749,1.399c.388,.145,.585,.577,.44,.965-.126,.336-.189,.689-.189,1.049,0,.362,.063,.714,.188,1.047,.07,.187,.062,.393-.02,.575-.083,.181-.233,.322-.42,.392l-3.749,1.399c-.087,.032-.176,.047-.263,.047Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/life-ring.tsx b/packages/ui/src/icons/nucleo/life-ring.tsx
index d120fd5845f..d95e6580079 100644
--- a/packages/ui/src/icons/nucleo/life-ring.tsx
+++ b/packages/ui/src/icons/nucleo/life-ring.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function LifeRing(props: SVGProps<SVGSVGElement>) {
+export function LifeRing({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,102 +13,157 @@ export function LifeRing(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <path
-          d="M5.486,7.688c.379-1.016,1.187-1.823,2.203-2.203"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M10.312,5.486c1.016,.379,1.823,1.187,2.203,2.203"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M12.514,10.312c-.379,1.016-1.187,1.823-2.203,2.203"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M7.688,12.514c-1.016-.379-1.823-1.187-2.203-2.203"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M6.464,15.794c-1.964-.733-3.525-2.294-4.259-4.259"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M15.794,11.536c-.733,1.964-2.295,3.525-4.259,4.259"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M11.536,2.206c1.964,.733,3.525,2.295,4.259,4.259"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M2.206,6.464c.733-1.964,2.294-3.525,4.259-4.259"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M10.311,5.487l1.399-3.749h0c-.844-.315-1.757-.487-2.711-.487-.954,0-1.867,.172-2.711,.487l1.399,3.749c.409-.153,.849-.236,1.311-.236s.903,.084,1.311,.237Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M12.513,10.311l3.749,1.399h0c.315-.844,.487-1.757,.487-2.71,0-.954-.172-1.867-.487-2.711l-3.749,1.399c.153,.409,.236,.849,.236,1.311s-.084,.903-.237,1.311Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M7.689,12.513l-1.399,3.749h0c.844,.315,1.757,.487,2.711,.487,.954,0,1.867-.172,2.711-.487l-1.399-3.749c-.409,.153-.849,.236-1.311,.236s-.903-.084-1.311-.237Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M5.487,7.689l-3.749-1.399h0c-.315,.844-.487,1.757-.487,2.71,0,.954,.172,1.867,.487,2.711l3.749-1.399c-.153-.409-.236-.849-.236-1.311s.084-.903,.237-1.311Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M6.188,7.951l-1.404-.525c.457-1.223,1.42-2.186,2.643-2.643l.525,1.405c-.815,.305-1.458,.947-1.764,1.763Z"
+            fill="currentColor"
+            />
+            <path
+            d="M11.812,7.951c-.306-.815-.948-1.458-1.764-1.763l.525-1.405c1.223,.457,2.186,1.42,2.643,2.643l-1.404,.525Z"
+            fill="currentColor"
+            />
+            <path
+            d="M10.574,13.217l-.525-1.405c.815-.305,1.458-.947,1.764-1.763l1.404,.525c-.457,1.223-1.42,2.186-2.643,2.643Z"
+            fill="currentColor"
+            />
+            <path
+            d="M7.426,13.217c-1.223-.457-2.186-1.42-2.643-2.643l1.404-.525c.306,.815,.948,1.458,1.764,1.763l-.525,1.405Z"
+            fill="currentColor"
+            />
+            <path
+            d="M6.202,16.497c-2.174-.812-3.887-2.524-4.698-4.699l1.404-.524c.66,1.767,2.052,3.159,3.819,3.818l-.525,1.405Z"
+            fill="currentColor"
+            />
+            <path
+            d="M11.798,16.497l-.525-1.405c1.768-.66,3.159-2.051,3.819-3.818l1.404,.524c-.812,2.175-2.524,3.888-4.698,4.699Z"
+            fill="currentColor"
+            />
+            <path
+            d="M15.091,6.727c-.658-1.767-2.05-3.159-3.818-3.819l.525-1.405c2.175,.812,3.888,2.525,4.699,4.7l-1.406,.524Z"
+            fill="currentColor"
+            />
+            <path
+            d="M2.908,6.727l-1.404-.524c.812-2.175,2.524-3.888,4.698-4.699l.525,1.405c-1.768,.66-3.159,2.051-3.819,3.818Z"
+            fill="currentColor"
+            />
+            <path
+            d="M10.312,6.237c-.087,0-.176-.015-.263-.047-.675-.251-1.429-.251-2.098,0-.188,.069-.394,.062-.574-.021-.181-.083-.321-.233-.392-.42l-1.399-3.749c-.069-.186-.062-.393,.021-.574,.083-.181,.234-.322,.42-.391,1.902-.71,4.045-.71,5.947,0,.388,.145,.585,.577,.44,.965l-1.399,3.75c-.113,.302-.399,.488-.703,.488Z"
+            fill="currentColor"
+            />
+            <path
+            d="M16.263,12.46c-.087,0-.176-.015-.263-.047l-3.749-1.399c-.388-.145-.585-.577-.44-.965,.126-.336,.189-.689,.189-1.049,0-.362-.063-.714-.188-1.047-.07-.187-.062-.393,.02-.575,.083-.181,.233-.322,.42-.392l3.749-1.399c.393-.145,.82,.053,.965,.44,.355,.949,.535,1.95,.535,2.973s-.18,2.024-.535,2.973c-.112,.301-.398,.487-.702,.487Z"
+            fill="currentColor"
+            />
+            <path
+            d="M9,17.5c-1.022,0-2.022-.18-2.974-.535-.388-.145-.585-.577-.44-.965l1.399-3.75c.146-.388,.576-.585,.966-.44,.675,.251,1.429,.251,2.098,0,.187-.07,.393-.063,.574,.021,.181,.083,.321,.233,.392,.42l1.399,3.749c.069,.186,.062,.393-.021,.574-.083,.181-.234,.322-.42,.391-.951,.355-1.951,.535-2.974,.535Z"
+            fill="currentColor"
+            />
+            <path
+            d="M1.737,12.46c-.304,0-.59-.186-.702-.487-.355-.949-.535-1.95-.535-2.973s.18-2.024,.535-2.973c.145-.387,.574-.584,.965-.44l3.749,1.399c.388,.145,.585,.577,.44,.965-.126,.336-.189,.689-.189,1.049,0,.362,.063,.714,.188,1.047,.07,.187,.062,.393-.02,.575-.083,.181-.233,.322-.42,.392l-3.749,1.399c-.087,.032-.176,.047-.263,.047Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <path
+            d="M5.486,7.688c.379-1.016,1.187-1.823,2.203-2.203"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M10.312,5.486c1.016,.379,1.823,1.187,2.203,2.203"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M12.514,10.312c-.379,1.016-1.187,1.823-2.203,2.203"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M7.688,12.514c-1.016-.379-1.823-1.187-2.203-2.203"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M6.464,15.794c-1.964-.733-3.525-2.294-4.259-4.259"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M15.794,11.536c-.733,1.964-2.295,3.525-4.259,4.259"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M11.536,2.206c1.964,.733,3.525,2.295,4.259,4.259"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M2.206,6.464c.733-1.964,2.294-3.525,4.259-4.259"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M10.311,5.487l1.399-3.749h0c-.844-.315-1.757-.487-2.711-.487-.954,0-1.867,.172-2.711,.487l1.399,3.749c.409-.153,.849-.236,1.311-.236s.903,.084,1.311,.237Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M12.513,10.311l3.749,1.399h0c.315-.844,.487-1.757,.487-2.71,0-.954-.172-1.867-.487-2.711l-3.749,1.399c.153,.409,.236,.849,.236,1.311s-.084,.903-.237,1.311Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M7.689,12.513l-1.399,3.749h0c.844,.315,1.757,.487,2.711,.487,.954,0,1.867-.172,2.711-.487l-1.399-3.749c-.409,.153-.849,.236-1.311,.236s-.903-.084-1.311-.237Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M5.487,7.689l-3.749-1.399h0c-.315,.844-.487,1.757-.487,2.71,0,.954,.172,1.867,.487,2.711l3.749-1.399c-.153-.409-.236-.849-.236-1.311s.084-.903,.237-1.311Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/lock-fill.tsx b/packages/ui/src/icons/nucleo/lock-fill.tsx
deleted file mode 100644
index 7ab2444ad9e..00000000000
--- a/packages/ui/src/icons/nucleo/lock-fill.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { SVGProps } from "react";
-
-export function LockFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
-      <g fill="currentColor">
-        <path
-          d="M12.25,9c-.414,0-.75-.336-.75-.75v-3.25c0-1.378-1.122-2.5-2.5-2.5s-2.5,1.122-2.5,2.5v3.25c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75v-3.25c0-2.206,1.794-4,4-4s4,1.794,4,4v3.25c0,.414-.336,.75-.75,.75Z"
-          fill="currentColor"
-        />
-        <path
-          d="M12.75,7.5H5.25c-1.517,0-2.75,1.233-2.75,2.75v4c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75v-4c0-1.517-1.233-2.75-2.75-2.75Zm-3,5.25c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75v-1c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v1Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/lock.tsx b/packages/ui/src/icons/nucleo/lock.tsx
index 8fbcdade49c..ffd0c224391 100644
--- a/packages/ui/src/icons/nucleo/lock.tsx
+++ b/packages/ui/src/icons/nucleo/lock.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Lock(props: SVGProps<SVGSVGElement>) {
+export function Lock({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,38 +13,53 @@ export function Lock(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <path
-          d="M5.75,8.25v-3.25c0-1.795,1.455-3.25,3.25-3.25h0c1.795,0,3.25,1.455,3.25,3.25v3.25"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <line
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x1="9"
-          x2="9"
-          y1="11.75"
-          y2="12.75"
-        />
-        <rect
-          height="8"
-          width="11.5"
-          fill="none"
-          rx="2"
-          ry="2"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-          x="3.25"
-          y="8.25"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M12.25,9c-.414,0-.75-.336-.75-.75v-3.25c0-1.378-1.122-2.5-2.5-2.5s-2.5,1.122-2.5,2.5v3.25c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75v-3.25c0-2.206,1.794-4,4-4s4,1.794,4,4v3.25c0,.414-.336,.75-.75,.75Z"
+            fill="currentColor"
+            />
+            <path
+            d="M12.75,7.5H5.25c-1.517,0-2.75,1.233-2.75,2.75v4c0,1.517,1.233,2.75,2.75,2.75h7.5c1.517,0,2.75-1.233,2.75-2.75v-4c0-1.517-1.233-2.75-2.75-2.75Zm-3,5.25c0,.414-.336,.75-.75,.75s-.75-.336-.75-.75v-1c0-.414,.336-.75,.75-.75s.75,.336,.75,.75v1Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <path
+            d="M5.75,8.25v-3.25c0-1.795,1.455-3.25,3.25-3.25h0c1.795,0,3.25,1.455,3.25,3.25v3.25"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <line
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x1="9"
+            x2="9"
+            y1="11.75"
+            y2="12.75"
+            />
+            <rect
+            height="8"
+            width="11.5"
+            fill="none"
+            rx="2"
+            ry="2"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            x="3.25"
+            y="8.25"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/microphone-fill.tsx b/packages/ui/src/icons/nucleo/microphone-fill.tsx
deleted file mode 100644
index ac77a5f4456..00000000000
--- a/packages/ui/src/icons/nucleo/microphone-fill.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SVGProps } from "react";
-
-export function MicrophoneFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M9,12c2.206,0,4-1.794,4-4v-3c0-2.206-1.794-4-4-4s-4,1.794-4,4v3c0,2.206,1.794,4,4,4Z"
-          fill="currentColor"
-        />
-        <path
-          d="M15.25,7.25c-.414,0-.75,.336-.75,.75,0,3.033-2.467,5.5-5.5,5.5s-5.5-2.467-5.5-5.5c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75c0,3.606,2.742,6.583,6.25,6.958v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c3.508-.376,6.25-3.352,6.25-6.958,0-.414-.336-.75-.75-.75Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/microphone.tsx b/packages/ui/src/icons/nucleo/microphone.tsx
new file mode 100644
index 00000000000..eb4b592d7ca
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/microphone.tsx
@@ -0,0 +1,66 @@
+import { SVGProps } from "react";
+
+export function Microphone({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <>
+            <path
+              d="M9,12c2.206,0,4-1.794,4-4v-3c0-2.206-1.794-4-4-4s-4,1.794-4,4v3c0,2.206,1.794,4,4,4Z"
+              fill="currentColor"
+            />
+            <path
+              d="M15.25,7.25c-.414,0-.75,.336-.75,.75,0,3.033-2.467,5.5-5.5,5.5s-5.5-2.467-5.5-5.5c0-.414-.336-.75-.75-.75s-.75,.336-.75,.75c0,3.606,2.742,6.583,6.25,6.958v1.292c0,.414,.336,.75,.75,.75s.75-.336,.75-.75v-1.292c3.508-.376,6.25-3.352,6.25-6.958,0-.414-.336-.75-.75-.75Z"
+              fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <rect
+              height="9.5"
+              width="6.5"
+              fill="none"
+              rx="3.25"
+              ry="3.25"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+              x="5.75"
+              y="1.75"
+            />
+            <path
+              d="M15.25,8c0,3.452-2.798,6.25-6.25,6.25h0c-3.452,0-6.25-2.798-6.25-6.25"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+            <line
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+              x1="9"
+              x2="9"
+              y1="14.25"
+              y2="16.25"
+            />
+          </>
+        )}
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/msgs-fill.tsx b/packages/ui/src/icons/nucleo/msgs-fill.tsx
deleted file mode 100644
index dbb1397def7..00000000000
--- a/packages/ui/src/icons/nucleo/msgs-fill.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { SVGProps } from "react";
-
-export function MsgsFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M0.750144 8.24811C0.750144 4.53189 3.76213 1.51971 7.47752 1.51971C9.72359 1.51971 11.7066 2.62469 12.926 4.31153C13.1686 4.64723 13.0932 5.11607 12.7575 5.35873C12.4218 5.60138 11.953 5.52595 11.7103 5.19026C10.7592 3.8745 9.21906 3.01971 7.47752 3.01971C4.59072 3.01971 2.25014 5.36014 2.25014 8.24811C2.25014 9.19752 2.50714 10.0857 2.95215 10.8551C3.11955 11.1695 3.18281 11.5513 3.18367 11.8704C3.18456 12.1998 3.13279 12.5477 3.04455 12.8835C3.01026 13.014 2.96935 13.1468 2.92188 13.2796C2.93032 13.2772 2.93876 13.2748 2.94719 13.2723C3.44691 13.1268 3.8643 12.938 4.08659 12.7937C4.32308 12.6401 4.62573 12.6322 4.86995 12.7731C5.1494 12.9344 5.55723 13.1367 6.0758 13.2825C6.47456 13.3946 6.70694 13.8087 6.59485 14.2075C6.48275 14.6062 6.06862 14.8386 5.66986 14.7265C5.20995 14.5972 4.81844 14.4338 4.50273 14.2773C4.17031 14.4421 3.77417 14.5938 3.36658 14.7125C2.77647 14.8843 2.08958 15.0083 1.45981 14.9744C1.16413 14.9585 0.9055 14.7701 0.799676 14.4935C0.693852 14.217 0.760646 13.9041 0.970163 13.6948C1.22943 13.4359 1.46666 12.9861 1.5938 12.5023C1.65555 12.2673 1.68415 12.0504 1.68368 11.8744C1.68321 11.7022 1.6552 11.6147 1.64341 11.5883C1.07853 10.6048 0.750144 9.46533 0.750144 8.24811Z"
-          fill="currentColor"
-          fillRule="evenodd"
-        />
-        <path
-          d="M12.4449 6.99872C12.4631 6.99738 12.4815 6.9967 12.4999 6.9967C15.1227 6.9967 17.2495 9.12339 17.2495 11.7463C17.2495 12.5976 17.0222 13.3935 16.6323 14.0824C16.63 14.0939 16.6252 14.1227 16.6251 14.1736C16.6249 14.2658 16.6402 14.3892 16.6772 14.5299C16.7547 14.825 16.8965 15.0828 17.0303 15.2168C17.2393 15.4262 17.3057 15.7389 17.1998 16.0152C17.0939 16.2915 16.8354 16.4796 16.54 16.4956C16.0803 16.5205 15.591 16.4301 15.1813 16.3106C14.9411 16.2406 14.7036 16.1534 14.4911 16.0564C14.1966 16.1931 13.8224 16.3304 13.3781 16.415C13.0937 16.4689 12.7991 16.4976 12.4991 16.4976C9.8753 16.4976 7.74951 14.3708 7.74951 11.748C7.74951 9.14318 9.84695 7.02779 12.4449 6.99872Z"
-          fill="currentColor"
-          fillRule="evenodd"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/msgs.tsx b/packages/ui/src/icons/nucleo/msgs.tsx
index 6a1e1e92778..7b135edcd26 100644
--- a/packages/ui/src/icons/nucleo/msgs.tsx
+++ b/packages/ui/src/icons/nucleo/msgs.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Msgs(props: SVGProps<SVGSVGElement>) {
+export function Msgs({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,22 +13,39 @@ export function Msgs(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <path
-          d="M12.337,4.767c-1.095-1.806-3.074-3.017-5.34-3.017C3.547,1.75,.75,4.547,.75,7.998c0,1.136,.308,2.199,.839,3.117,.37,.695-.045,2.337-.839,3.13,1.077,.058,2.497-.428,3.13-.839,.421,.243,1.09,.566,1.964,.731,.112,.021,.232,.017,.346,.032"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M12.75,7.246c2.485,0,4.5,2.015,4.5,4.5,0,.819-.222,1.584-.604,2.246-.267,.5,.033,1.683,.604,2.255-.776,.042-1.798-.309-2.255-.604-.303,.175-.785,.407-1.415,.527-.269,.051-.547,.078-.831,.078-2.486,0-4.5-2.015-4.5-4.5,0-2.486,2.015-4.5,4.5-4.5Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M0.750144 8.24811C0.750144 4.53189 3.76213 1.51971 7.47752 1.51971C9.72359 1.51971 11.7066 2.62469 12.926 4.31153C13.1686 4.64723 13.0932 5.11607 12.7575 5.35873C12.4218 5.60138 11.953 5.52595 11.7103 5.19026C10.7592 3.8745 9.21906 3.01971 7.47752 3.01971C4.59072 3.01971 2.25014 5.36014 2.25014 8.24811C2.25014 9.19752 2.50714 10.0857 2.95215 10.8551C3.11955 11.1695 3.18281 11.5513 3.18367 11.8704C3.18456 12.1998 3.13279 12.5477 3.04455 12.8835C3.01026 13.014 2.96935 13.1468 2.92188 13.2796C2.93032 13.2772 2.93876 13.2748 2.94719 13.2723C3.44691 13.1268 3.8643 12.938 4.08659 12.7937C4.32308 12.6401 4.62573 12.6322 4.86995 12.7731C5.1494 12.9344 5.55723 13.1367 6.0758 13.2825C6.47456 13.3946 6.70694 13.8087 6.59485 14.2075C6.48275 14.6062 6.06862 14.8386 5.66986 14.7265C5.20995 14.5972 4.81844 14.4338 4.50273 14.2773C4.17031 14.4421 3.77417 14.5938 3.36658 14.7125C2.77647 14.8843 2.08958 15.0083 1.45981 14.9744C1.16413 14.9585 0.9055 14.7701 0.799676 14.4935C0.693852 14.217 0.760646 13.9041 0.970163 13.6948C1.22943 13.4359 1.46666 12.9861 1.5938 12.5023C1.65555 12.2673 1.68415 12.0504 1.68368 11.8744C1.68321 11.7022 1.6552 11.6147 1.64341 11.5883C1.07853 10.6048 0.750144 9.46533 0.750144 8.24811Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            />
+            <path
+            d="M12.4449 6.99872C12.4631 6.99738 12.4815 6.9967 12.4999 6.9967C15.1227 6.9967 17.2495 9.12339 17.2495 11.7463C17.2495 12.5976 17.0222 13.3935 16.6323 14.0824C16.63 14.0939 16.6252 14.1227 16.6251 14.1736C16.6249 14.2658 16.6402 14.3892 16.6772 14.5299C16.7547 14.825 16.8965 15.0828 17.0303 15.2168C17.2393 15.4262 17.3057 15.7389 17.1998 16.0152C17.0939 16.2915 16.8354 16.4796 16.54 16.4956C16.0803 16.5205 15.591 16.4301 15.1813 16.3106C14.9411 16.2406 14.7036 16.1534 14.4911 16.0564C14.1966 16.1931 13.8224 16.3304 13.3781 16.415C13.0937 16.4689 12.7991 16.4976 12.4991 16.4976C9.8753 16.4976 7.74951 14.3708 7.74951 11.748C7.74951 9.14318 9.84695 7.02779 12.4449 6.99872Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            />
+          </>
+        ) : (
+          <>
+            <path
+            d="M12.337,4.767c-1.095-1.806-3.074-3.017-5.34-3.017C3.547,1.75,.75,4.547,.75,7.998c0,1.136,.308,2.199,.839,3.117,.37,.695-.045,2.337-.839,3.13,1.077,.058,2.497-.428,3.13-.839,.421,.243,1.09,.566,1.964,.731,.112,.021,.232,.017,.346,.032"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M12.75,7.246c2.485,0,4.5,2.015,4.5,4.5,0,.819-.222,1.584-.604,2.246-.267,.5,.033,1.683,.604,2.255-.776,.042-1.798-.309-2.255-.604-.303,.175-.785,.407-1.415,.527-.269,.051-.547,.078-.831,.078-2.486,0-4.5-2.015-4.5-4.5,0-2.486,2.015-4.5,4.5-4.5Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/star-fill.tsx b/packages/ui/src/icons/nucleo/star-fill.tsx
deleted file mode 100644
index 3f3b9df2740..00000000000
--- a/packages/ui/src/icons/nucleo/star-fill.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { SVGProps } from "react";
-
-export function StarFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="M16.963,6.786c-.088-.271-.323-.469-.605-.51l-4.62-.671L9.672,1.418c-.252-.512-1.093-.512-1.345,0l-2.066,4.186-4.62,.671c-.282,.041-.517,.239-.605,.51-.088,.271-.015,.57,.19,.769l3.343,3.258-.79,4.601c-.048,.282,.067,.566,.298,.734,.231,.167,.538,.189,.79,.057l4.132-2.173,4.132,2.173c.11,.058,.229,.086,.349,.086,.155,0,.31-.048,.441-.143,.231-.168,.347-.452,.298-.734l-.79-4.601,3.343-3.258c.205-.199,.278-.498,.19-.769Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/star.tsx b/packages/ui/src/icons/nucleo/star.tsx
index ded8288a1b8..da0cfaf9241 100644
--- a/packages/ui/src/icons/nucleo/star.tsx
+++ b/packages/ui/src/icons/nucleo/star.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Star(props: SVGProps<SVGSVGElement>) {
+export function Star({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,14 +13,25 @@ export function Star(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <polygon
-          fill="none"
-          points="9 1.75 11.24 6.289 16.25 7.017 12.625 10.551 13.481 15.54 9 13.185 4.519 15.54 5.375 10.551 1.75 7.017 6.76 6.289 9 1.75"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <path
+            d="M16.963,6.786c-.088-.271-.323-.469-.605-.51l-4.62-.671L9.672,1.418c-.252-.512-1.093-.512-1.345,0l-2.066,4.186-4.62,.671c-.282,.041-.517,.239-.605,.51-.088,.271-.015,.57,.19,.769l3.343,3.258-.79,4.601c-.048,.282,.067,.566,.298,.734,.231,.167,.538,.189,.79,.057l4.132-2.173,4.132,2.173c.11,.058,.229,.086,.349,.086,.155,0,.31-.048,.441-.143,.231-.168,.347-.452,.298-.734l-.79-4.601,3.343-3.258c.205-.199,.278-.498,.19-.769Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <polygon
+            fill="none"
+            points="9 1.75 11.24 6.289 16.25 7.017 12.625 10.551 13.481 15.54 9 13.185 4.519 15.54 5.375 10.551 1.75 7.017 6.76 6.289 9 1.75"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/nucleo/toggle2-fill.tsx b/packages/ui/src/icons/nucleo/toggle2-fill.tsx
deleted file mode 100644
index 894a0f650ad..00000000000
--- a/packages/ui/src/icons/nucleo/toggle2-fill.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { SVGProps } from "react";
-
-export function Toggle2Fill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <path
-          d="m11.5,3h-5C3.1914,3,.5,5.6914.5,9s2.6914,6,6,6h5c3.3086,0,6-2.6914,6-6s-2.6914-6-6-6Zm-5,9c-1.6543,0-3-1.3457-3-3s1.3457-3,3-3,3,1.3457,3,3-1.3457,3-3,3Z"
-          fill="currentColor"
-          strokeWidth="0"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/toggle2.tsx b/packages/ui/src/icons/nucleo/toggle2.tsx
new file mode 100644
index 00000000000..d4e0b7f8d98
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/toggle2.tsx
@@ -0,0 +1,47 @@
+import { SVGProps } from "react";
+
+export function Toggle2({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        {variant === "fill" ? (
+          <path
+            d="m11.5,3h-5C3.1914,3,.5,5.6914.5,9s2.6914,6,6,6h5c3.3086,0,6-2.6914,6-6s-2.6914-6-6-6Zm-5,9c-1.6543,0-3-1.3457-3-3s1.3457-3,3-3,3,1.3457,3,3-1.3457,3-3,3Z"
+            fill="currentColor"
+            strokeWidth="0"
+          />
+        ) : (
+          <>
+            <path
+              d="m6.5,3.75h5c2.8995,0,5.25,2.3505,5.25,5.25h0c0,2.8995-2.3505,5.25-5.25,5.25h-5c-2.8995,0-5.25-2.3505-5.25-5.25h0c0-2.8995,2.3505-5.25,5.25-5.25Z"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+            <circle
+              cx="6.5"
+              cy="9"
+              fill="currentColor"
+              r="1.75"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
+            />
+          </>
+        )}
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/users-fill.tsx b/packages/ui/src/icons/nucleo/users-fill.tsx
deleted file mode 100644
index c24573b68fc..00000000000
--- a/packages/ui/src/icons/nucleo/users-fill.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { SVGProps } from "react";
-
-export function UsersFill(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      height="18"
-      width="18"
-      viewBox="0 0 18 18"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <g fill="currentColor">
-        <circle cx="5.75" cy="6.25" fill="currentColor" r="2.75" />
-        <circle cx="12" cy="3.75" fill="currentColor" r="2.75" />
-        <path
-          d="M17.196,11.098c-.811-2.152-2.899-3.598-5.196-3.598-1.417,0-2.752,.553-3.759,1.48,1.854,.709,3.385,2.169,4.109,4.089,.112,.296,.162,.603,.182,.91,1.211-.05,2.409-.26,3.565-.646,.456-.152,.834-.487,1.041-.919,.2-.42,.221-.888,.059-1.316Z"
-          fill="currentColor"
-        />
-        <path
-          d="M10.946,13.598c-.811-2.152-2.899-3.598-5.196-3.598S1.365,11.446,.554,13.598c-.162,.429-.141,.896,.059,1.316,.206,.432,.585,.767,1.041,.919,1.325,.442,2.704,.667,4.096,.667s2.771-.225,4.096-.667c.456-.152,.834-.487,1.041-.919,.2-.42,.221-.888,.059-1.316Z"
-          fill="currentColor"
-        />
-      </g>
-    </svg>
-  );
-}
diff --git a/packages/ui/src/icons/nucleo/users.tsx b/packages/ui/src/icons/nucleo/users.tsx
index 57cde6e8713..9483f322132 100644
--- a/packages/ui/src/icons/nucleo/users.tsx
+++ b/packages/ui/src/icons/nucleo/users.tsx
@@ -1,6 +1,9 @@
 import { SVGProps } from "react";
 
-export function Users(props: SVGProps<SVGSVGElement>) {
+export function Users({
+  variant = "outline",
+  ...props
+}: SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }) {
   return (
     <svg
       height="18"
@@ -10,42 +13,59 @@ export function Users(props: SVGProps<SVGSVGElement>) {
       {...props}
     >
       <g fill="currentColor">
-        <circle
-          cx="5.75"
-          cy="6.25"
-          fill="none"
-          r="2"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <circle
-          cx="12"
-          cy="3.75"
-          fill="none"
-          r="2"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M9.609,15.122c.523-.175,.83-.744,.636-1.259-.685-1.818-2.436-3.112-4.494-3.112s-3.809,1.294-4.494,3.112c-.194,.516,.113,1.085,.636,1.259,.962,.321,2.281,.628,3.859,.628s2.897-.307,3.858-.628Z"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
-        <path
-          d="M12.749,13.227c1.248-.077,2.304-.336,3.109-.605,.523-.175,.83-.744,.636-1.259-.685-1.818-2.436-3.112-4.494-3.112-.977,0-1.885,.292-2.643,.793"
-          fill="none"
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="1.5"
-        />
+        {variant === "fill" ? (
+          <>
+            <circle cx="5.75" cy="6.25" fill="currentColor" r="2.75" />
+            <circle cx="12" cy="3.75" fill="currentColor" r="2.75" />
+            <path
+            d="M17.196,11.098c-.811-2.152-2.899-3.598-5.196-3.598-1.417,0-2.752,.553-3.759,1.48,1.854,.709,3.385,2.169,4.109,4.089,.112,.296,.162,.603,.182,.91,1.211-.05,2.409-.26,3.565-.646,.456-.152,.834-.487,1.041-.919,.2-.42,.221-.888,.059-1.316Z"
+            fill="currentColor"
+            />
+            <path
+            d="M10.946,13.598c-.811-2.152-2.899-3.598-5.196-3.598S1.365,11.446,.554,13.598c-.162,.429-.141,.896,.059,1.316,.206,.432,.585,.767,1.041,.919,1.325,.442,2.704,.667,4.096,.667s2.771-.225,4.096-.667c.456-.152,.834-.487,1.041-.919,.2-.42,.221-.888,.059-1.316Z"
+            fill="currentColor"
+            />
+          </>
+        ) : (
+          <>
+            <circle
+            cx="5.75"
+            cy="6.25"
+            fill="none"
+            r="2"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <circle
+            cx="12"
+            cy="3.75"
+            fill="none"
+            r="2"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M9.609,15.122c.523-.175,.83-.744,.636-1.259-.685-1.818-2.436-3.112-4.494-3.112s-3.809,1.294-4.494,3.112c-.194,.516,.113,1.085,.636,1.259,.962,.321,2.281,.628,3.859,.628s2.897-.307,3.858-.628Z"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+            <path
+            d="M12.749,13.227c1.248-.077,2.304-.336,3.109-.605,.523-.175,.83-.744,.636-1.259-.685-1.818-2.436-3.112-4.494-3.112-.977,0-1.885,.292-2.643,.793"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+            />
+          </>
+        )}
       </g>
     </svg>
   );
diff --git a/packages/ui/src/icons/with-fill-variant.tsx b/packages/ui/src/icons/with-fill-variant.tsx
new file mode 100644
index 00000000000..13a674c8477
--- /dev/null
+++ b/packages/ui/src/icons/with-fill-variant.tsx
@@ -0,0 +1,13 @@
+import { ComponentProps, ComponentType, SVGProps } from "react";
+
+type VariantIcon = ComponentType<
+  SVGProps<SVGSVGElement> & { variant?: "outline" | "fill" }
+>;
+
+export function withFillVariant(Icon: VariantIcon): VariantIcon {
+  const FillIcon = (props: ComponentProps<VariantIcon>) => (
+    <Icon variant="fill" {...props} />
+  );
+  FillIcon.displayName = `FillVariant(${Icon.displayName || Icon.name || "Icon"})`;
+  return FillIcon;
+}
diff --git a/packages/ui/src/nav/content/resources-content.tsx b/packages/ui/src/nav/content/resources-content.tsx
index ba6cefea6ec..89b494459f0 100644
--- a/packages/ui/src/nav/content/resources-content.tsx
+++ b/packages/ui/src/nav/content/resources-content.tsx
@@ -3,7 +3,7 @@ import { Link as NavigationMenuLink } from "@radix-ui/react-navigation-menu";
 import Link from "next/link";
 import { RESOURCES } from "../../content";
 import { Grid } from "../../grid";
-import { Book2Fill, LifeRingFill } from "../../icons";
+import { Book2, LifeRing } from "../../icons";
 import {
   ContentLinkCard,
   NAV_UTM_PARAMS,
@@ -12,14 +12,14 @@ import {
 
 const mainLinks = [
   {
-    icon: LifeRingFill,
+    icon: LifeRing,
     title: "Help Center",
     description: "Answers to your questions",
     thumbnail: "https://assets.dub.co/misc/help-thumbnail.jpg",
     href: "/help",
   },
   {
-    icon: Book2Fill,
+    icon: Book2,
     title: "Docs",
     description: "Platform documentation",
     thumbnail: "https://assets.dub.co/misc/docs-thumbnail.jpg",
@@ -62,7 +62,10 @@ export function ResourcesContent({ domain }: { domain: string }) {
                     )}
                   />
                 </div>
-                <Icon className="relative size-5 text-neutral-700 dark:text-white/60" />
+                <Icon
+                  variant="fill"
+                  className="relative size-5 text-neutral-700 dark:text-white/60"
+                />
                 <div className="relative">
                   <span className="text-sm font-medium text-neutral-900 dark:text-white">
                     {title}
@@ -93,7 +96,10 @@ export function ResourcesContent({ domain }: { domain: string }) {
               })}
               icon={
                 <div className="shrink-0 rounded-md border border-neutral-200 bg-white/50 p-2.5 dark:border-white/20 dark:bg-white/10">
-                  <Icon className="size-4 text-neutral-600 transition-colors dark:text-white/60" />
+                  <Icon
+                    variant="fill"
+                    className="size-4 text-neutral-600 transition-colors dark:text-white/60"
+                  />
                 </div>
               }
               title={title}
@@ -119,7 +125,10 @@ export function ResourcesContent({ domain }: { domain: string }) {
               })}
               icon={
                 <div className="shrink-0 rounded-md border border-neutral-200 bg-white/50 p-2.5 dark:border-white/20 dark:bg-white/10">
-                  <Icon className="size-4 text-neutral-600 transition-colors dark:text-white/60" />
+                  <Icon
+                    variant="fill"
+                    className="size-4 text-neutral-600 transition-colors dark:text-white/60"
+                  />
                 </div>
               }
               title={title}
diff --git a/packages/ui/src/nav/content/solutions-content.tsx b/packages/ui/src/nav/content/solutions-content.tsx
index cc06c808b77..d09e199e0d7 100644
--- a/packages/ui/src/nav/content/solutions-content.tsx
+++ b/packages/ui/src/nav/content/solutions-content.tsx
@@ -3,7 +3,7 @@ import { Link as NavigationMenuLink } from "@radix-ui/react-navigation-menu";
 import Link from "next/link";
 import { SDKS } from "../../content";
 import { Grid } from "../../grid";
-import { DiamondTurnRightFill, MicrophoneFill, UsersFill } from "../../icons";
+import { DiamondTurnRight, Microphone, Users } from "../../icons";
 import {
   ContentLinkCard,
   NAV_UTM_PARAMS,
@@ -12,19 +12,19 @@ import {
 
 const mainLinks = [
   {
-    icon: DiamondTurnRightFill,
+    icon: DiamondTurnRight,
     title: "Marketing Attribution",
     description: "Easily track and measure marketing impact",
     href: "/analytics",
   },
   {
-    icon: MicrophoneFill,
+    icon: Microphone,
     title: "Content Creators",
     description: "Intelligent audience insights and link tracking",
     href: "/solutions/creators",
   },
   {
-    icon: UsersFill,
+    icon: Users,
     title: "Affiliate Management",
     description: "Manage affiliates and automate payouts",
     href: "/partners",
@@ -66,7 +66,10 @@ export function SolutionsContent({ domain }: { domain: string }) {
                     )}
                   />
                 </div>
-                <Icon className="relative size-5 text-neutral-700 dark:text-white/60" />
+                <Icon
+                  variant="fill"
+                  className="relative size-5 text-neutral-700 dark:text-white/60"
+                />
                 <div className="relative">
                   <span className="text-sm font-medium text-neutral-900 dark:text-white">
                     {title}