diff --git a/README.md b/README.md
index f34f24b..8744225 100644
--- a/README.md
+++ b/README.md
@@ -159,13 +159,11 @@ npm run deploy
 ### How to use FontAwesome in the project
 
 1. Search [FontAwesome Icons](https://fontawesome.com/icons)
-2. Download the SVG code (if it's a Pro icon, please ask @zainfathoni to
-   download it for you)
-3. Paste the SVG code into the `SVG INPUT` panel of
-   [SVGR with these params](https://react-svgr.com/playground/?svgProps=role%3Dimg%2Cfill%3DcurrentColor&typescript=true)
-4. Copy the resulting `<svg>` tag in the `JSX OUTPUT` panel
-5. Paste the `<svg>` tag into the corresponding file under the
-   [icons](/app/icons/) directory
+2. Include the icons in the
+   [senarai](https://fontawesome.com/kits/5899c9809d/icons) icon kit. (please
+   ask @zainfathoni to do it for you)
+3. Upload the new SVG sprites to the `/public/images/` directory
+4. Use the `<Icon />` component and pass the icon set and id as props
 
 ## Frequently Used Commands
 
diff --git a/app/components/action-cards.tsx b/app/components/action-cards.tsx
index 432ef14..d1a7c42 100644
--- a/app/components/action-cards.tsx
+++ b/app/components/action-cards.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
 import { Link } from '@remix-run/react'
-import { classNames } from '../utils/class-names'
+import * as React from 'react'
 import { Categories } from '../model/categories'
+import { classNames } from '../utils/class-names'
+import { Icon } from './icon'
 
 export function ActionCards({ categories }: { categories: Categories }) {
   return (
@@ -29,7 +30,11 @@ export function ActionCards({ categories }: { categories: Categories }) {
                 'rounded-lg inline-flex p-3 ring-4 ring-white'
               )}
             >
-              <category.icon className="h-6 w-6" />
+              <Icon
+                set={category.iconSet}
+                id={category.iconId}
+                className="h-6 w-6"
+              />
             </span>
           </div>
           <div className="mt-8">
diff --git a/app/components/activities-grid.tsx b/app/components/activities-grid.tsx
index f77ea70..27e7d61 100644
--- a/app/components/activities-grid.tsx
+++ b/app/components/activities-grid.tsx
@@ -1,10 +1,10 @@
 import { useMatches } from '@remix-run/react'
 import * as React from 'react'
-import { Grid2Plus } from '../icons/duotone'
 import type { Activity } from '../model/activities'
 import { getCategoryByCategorySlug } from '../model/categories'
 import { classNames } from '../utils/class-names'
 import { Card } from './card'
+import { Icon } from './icon'
 import { senaraiForm } from './top-navigation'
 
 export function ActivitesGrid({ activities }: { activities: Activity[] }) {
@@ -19,7 +19,7 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
       <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {activities.map(
           ({ id, nama, link, ringkasan, image, usia, categorySlug }) => {
-            const { icon, iconForeground, iconBackground, title } =
+            const { iconSet, iconId, iconForeground, iconBackground, title } =
               getCategoryByCategorySlug(categorySlug)
             return (
               <Card
@@ -39,7 +39,8 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
                 image={image}
                 category={title}
                 categorySlug={categorySlug}
-                icon={icon}
+                iconSet={iconSet}
+                iconId={iconId}
                 foregroundColor={iconForeground}
                 backgroundColor={iconBackground}
               />
@@ -52,7 +53,8 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
           cta="Usulkan"
           category={category.title}
           link={addNewActivityLink}
-          icon={Grid2Plus}
+          iconSet="duotone"
+          iconId="grid-2-plus"
           foregroundColor={category.iconForeground}
           backgroundColor={category.iconBackground}
         />
@@ -68,7 +70,11 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
             'rounded-xl inline-flex p-4 mb-4 ring-4 ring-white'
           )}
         >
-          <category.icon className="w-16 h-16 flex-shrink-0 mx-auto " />
+          <Icon
+            set={category.iconSet}
+            id={category.iconId}
+            className="w-16 h-16 flex-shrink-0 mx-auto"
+          />
         </div>
         <h2 className="mt-2 text-sm font-medium text-gray-900">
           Belum ada aktivitas {category.title}
@@ -84,7 +90,12 @@ export function ActivitesGrid({ activities }: { activities: Activity[] }) {
             rel="noopener noreferrer"
             className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
           >
-            <Grid2Plus className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+            <Icon
+              set="duotone"
+              id="grid-2-plus"
+              className="-ml-1 mr-2 h-5 w-5"
+              aria-hidden="true"
+            />
             Usulkan Aktivitas
           </a>
         </div>
diff --git a/app/components/breadcrumbs.tsx b/app/components/breadcrumbs.tsx
index 55f0c37..4d76f35 100644
--- a/app/components/breadcrumbs.tsx
+++ b/app/components/breadcrumbs.tsx
@@ -1,7 +1,7 @@
 import { Link, useMatches } from '@remix-run/react'
 import * as React from 'react'
 import { categoriesRecord } from '../model/categories'
-import { Duotone } from './icons'
+import { Icon } from './icon'
 
 export default function Breadcrumbs() {
   const matches = useMatches()
@@ -15,7 +15,8 @@ export default function Breadcrumbs() {
           <li className="flex">
             <div className="flex items-center">
               <Link to="/" className="text-gray-500 hover:text-gray-700">
-                <Duotone
+                <Icon
+                  set="duotone"
                   id="house"
                   className="flex-shrink-0 h-5 w-5"
                   aria-hidden="true"
diff --git a/app/components/card.tsx b/app/components/card.tsx
index c050948..e30a3ad 100644
--- a/app/components/card.tsx
+++ b/app/components/card.tsx
@@ -1,8 +1,8 @@
 /* This example requires Tailwind CSS v2.0+ */
-import * as React from 'react'
 import { Link } from '@remix-run/react'
+import * as React from 'react'
 import { classNames } from '../utils/class-names'
-import { ArrowUpRightFromSquare, PenToSquare } from '../icons/duotone'
+import { Icon } from './icon'
 
 export type CardProps = {
   name: string
@@ -14,7 +14,8 @@ export type CardProps = {
   category: string
   categorySlug?: string
   image?: string
-  icon?: (props: React.SVGProps<SVGSVGElement>) => React.ReactElement
+  iconSet?: string
+  iconId?: string
   foregroundColor?: string
   backgroundColor?: string
 }
@@ -29,7 +30,8 @@ export const Card: React.FC<CardProps> = ({
   image,
   category,
   categorySlug,
-  icon: Icon,
+  iconSet,
+  iconId,
   foregroundColor: iconForeground,
   backgroundColor: iconBackground,
 }) => {
@@ -42,8 +44,10 @@ export const Card: React.FC<CardProps> = ({
             src={image}
             alt=""
           />
-        ) : Icon ? (
+        ) : iconSet && iconId ? (
           <Icon
+            set={iconSet}
+            id={iconId}
             className={classNames(
               iconForeground,
               'w-16 h-16 flex-shrink-0 mx-auto'
@@ -92,7 +96,9 @@ export const Card: React.FC<CardProps> = ({
                 rel="noopener noreferrer"
                 className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500"
               >
-                <PenToSquare
+                <Icon
+                  set="duotone"
+                  id="arrow-up-right-from-square"
                   className="w-5 h-5 text-gray-400"
                   aria-hidden="true"
                 />
@@ -113,7 +119,9 @@ export const Card: React.FC<CardProps> = ({
                 className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
               >
                 <span className="mr-3">{cta}</span>
-                <ArrowUpRightFromSquare
+                <Icon
+                  set="duotone"
+                  id="arrow-up-right-from-square"
                   className="w-5 h-5 text-gray-400"
                   aria-hidden="true"
                 />
diff --git a/app/components/icon.tsx b/app/components/icon.tsx
new file mode 100644
index 0000000..4873ac5
--- /dev/null
+++ b/app/components/icon.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+type IconProps = React.SVGProps<SVGSVGElement> & {
+  set: 'solid' | 'light' | 'duotone'
+  id: string
+}
+
+export function Icon({ set, id, ...props }: IconProps) {
+  return (
+    <svg fill="currentColor" {...props}>
+      <use href={`/images/${set}.svg#${id}`} />
+    </svg>
+  )
+}
diff --git a/app/components/icons.tsx b/app/components/icons.tsx
deleted file mode 100644
index f088ab9..0000000
--- a/app/components/icons.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react'
-
-type IconProps = React.SVGProps<SVGSVGElement> & { id: string }
-
-export function Duotone({ id, ...props }: IconProps) {
-  return (
-    <svg {...props}>
-      <use href={`/images/duotone.svg#${id}`} />
-    </svg>
-  )
-}
-
-export function Light({ id, ...props }: IconProps) {
-  return (
-    <svg {...props}>
-      <use href={`/images/light.svg#${id}`} />
-    </svg>
-  )
-}
-
-export function Solid({ id, ...props }: IconProps) {
-  return (
-    <svg {...props}>
-      <use href={`/images/solid.svg#${id}`} />
-    </svg>
-  )
-}
diff --git a/app/components/taxonomy.tsx b/app/components/taxonomy.tsx
index 7acca07..075dee5 100644
--- a/app/components/taxonomy.tsx
+++ b/app/components/taxonomy.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Activity } from '../model/activities'
 import { isAllEmptyString } from '../utils/string'
-import { ChevronRight } from '../icons/solid'
+import { Icon } from './icon'
 
 export function Taxonomy({
   activity: { benua, negara, provinsi, kabupaten, kecamatan, desa },
@@ -29,8 +29,10 @@ export function Taxonomy({
           {rest.map((item) => (
             <li key={item}>
               <div className="flex items-center">
-                <ChevronRight
-                  className="flex-shrink-0 h-3 w-3 text-gray-400"
+                <Icon
+                  set="solid"
+                  id="chevron-right"
+                  className="flex-shrink-0 h-5 w-5 text-gray-400"
                   aria-hidden="true"
                 />
                 <div className="ml-1 text-sm font-medium text-gray-500 hover:text-gray-700">
diff --git a/app/components/top-navigation.tsx b/app/components/top-navigation.tsx
index 9f2a803..7a7f1cb 100644
--- a/app/components/top-navigation.tsx
+++ b/app/components/top-navigation.tsx
@@ -1,14 +1,9 @@
-import * as React from 'react'
 import { Disclosure } from '@headlessui/react'
 import { Link, useMatches } from '@remix-run/react'
+import * as React from 'react'
 import { classNames } from '../utils/class-names'
-import {
-  ArrowUpRightFromSquare,
-  Bars,
-  MagnifyingGlass,
-  X,
-} from '../icons/duotone'
 import Breadcrumbs from './breadcrumbs'
+import { Icon } from './icon'
 
 export const senaraiForm = '/go/form'
 
@@ -34,7 +29,12 @@ const SearchBar = (props: TopNavigationProps) => {
       </label>
       <div className="relative text-gray-400 focus-within:text-gray-600">
         <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-          <MagnifyingGlass className="h-5 w-5" aria-hidden="true" />
+          <Icon
+            set="duotone"
+            id="magnifying-glass"
+            className="h-5 w-5"
+            aria-hidden="true"
+          />
         </div>
         <input
           id={props.id}
@@ -91,7 +91,9 @@ export const TopNavigation: React.FC<TopNavigationProps> = (
                             rel="noopener noreferrer"
                           >
                             {item.name}
-                            <ArrowUpRightFromSquare
+                            <Icon
+                              set="duotone"
+                              id="arrow-up-right-from-square"
                               className="ml-2 h-4 w-4 inline -mt-1"
                               aria-hidden="true"
                             />
@@ -126,9 +128,19 @@ export const TopNavigation: React.FC<TopNavigationProps> = (
                   <Disclosure.Button className="bg-indigo-600 p-2 rounded-md inline-flex items-center justify-center text-indigo-200 hover:text-white hover:bg-indigo-500 hover:bg-opacity-75 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-600 focus:ring-white">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
-                      <X className="block h-6 w-6" aria-hidden="true" />
+                      <Icon
+                        set="duotone"
+                        id="x"
+                        className="h-6 w-6"
+                        aria-hidden="true"
+                      />
                     ) : (
-                      <Bars className="block h-6 w-6" aria-hidden="true" />
+                      <Icon
+                        set="duotone"
+                        id="bars"
+                        className="h-6 w-6"
+                        aria-hidden="true"
+                      />
                     )}
                   </Disclosure.Button>
                 </div>
@@ -161,7 +173,9 @@ export const TopNavigation: React.FC<TopNavigationProps> = (
                   >
                     {item.name}
                     {item.external ? (
-                      <ArrowUpRightFromSquare
+                      <Icon
+                        set="duotone"
+                        id="arrow-up-right-from-square"
                         className="ml-2 h-4 w-4 inline -mt-1"
                         aria-hidden="true"
                       />
diff --git a/app/icons/duotone.tsx b/app/icons/duotone.tsx
deleted file mode 100644
index 1098cb4..0000000
--- a/app/icons/duotone.tsx
+++ /dev/null
@@ -1,314 +0,0 @@
-import * as React from 'react'
-
-export const ArrowUpRightFromSquare = (
-  props: React.SVGProps<SVGSVGElement>
-) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 448 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M256 64c0-17.67 14.3-32 32-32h128c17.7 0 32 14.33 32 32v128c0 17.7-14.3 32-32 32s-32-14.3-32-32v-50.7L214.6 310.6c-12.5 12.5-32.7 12.5-45.2 0s-12.5-32.7 0-45.2L338.7 96H288c-17.7 0-32-14.33-32-32z"
-    />
-    <path
-      d="M0 128c0-35.35 28.65-64 64-64h96c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H64v288h288v-96c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const Bars = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 448 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M416 128H32c-17.67 0-32-14.3-32-32 0-17.67 14.33-32 32-32h384c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32zm0 320H32c-17.67 0-32-14.3-32-32s14.33-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32z"
-    />
-    <path
-      d="M0 256c0-17.7 14.33-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.67 0-32-14.3-32-32z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const MagnifyingGlass = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M500.3 443.7 380.6 324a209.293 209.293 0 0 1-56.57 56.57l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0 15.6-15.57 15.6-40.97 0-56.57z"
-    />
-    <path
-      d="M207.1 0C93.12 0 0 93.13 0 208s93.12 208 207.1 208 208-93.13 208-208S322.9 0 207.1 0zm0 336c-70.58 0-128-57.42-128-128s57.42-128 128-128 128 57.42 128 128c0 70.6-56.5 128-128 128z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const X = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 384 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      d="M376.6 427.5c11.31 13.58 9.484 33.75-4.094 45.06a31.894 31.894 0 0 1-20.47 7.422c-9.172 0-18.27-3.922-24.59-11.52L192 305.1 56.6 467.6c-6.328 7.594-15.42 11.52-24.59 11.52a31.907 31.907 0 0 1-20.47-7.422c-13.58-11.31-15.41-31.48-4.094-45.06l142.9-171.5L7.422 84.5C-3.891 70.92-2.063 50.75 11.52 39.44c13.56-11.34 33.73-9.516 45.06 4.094L192 206 327.4 43.5c11.3-13.58 31.48-15.42 45.06-4.094 13.58 11.31 15.41 31.48 4.094 45.06l-142.9 171.5L376.6 427.5z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const Grid2Plus = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M408 360h64c13.3 0 24 10.7 24 24s-10.7 24-24 24h-64v64c0 13.3-10.7 24-24 24s-24-10.7-24-24v-64h-64c-13.3 0-24-10.7-24-24s10.7-24 24-24h64v-64c0-13.3 10.7-24 24-24s24 10.7 24 24v64z"
-    />
-    <path
-      d="M32 80c0-26.51 21.49-48 48-48h96c26.5 0 48 21.49 48 48v96c0 26.5-21.5 48-48 48H80c-26.51 0-48-21.5-48-48V80zm0 256c0-26.5 21.49-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H80c-26.51 0-48-21.5-48-48v-96zM432 32c26.5 0 48 21.49 48 48v96c0 26.5-21.5 48-48 48h-96c-26.5 0-48-21.5-48-48V80c0-26.51 21.5-48 48-48h96z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const PenToSquare = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M392.4 21.66c21.9-21.873 57.3-21.873 79.2 0l18.7 18.74c21.9 21.87 21.9 57.33 0 79.2l-30 30.1-98-97.98 30.1-30.06zm45.3 150.64L270.3 339.6c-6.1 6.2-13.6 10.8-21.9 13.6l-88.8 29.6c-9.5 2.8-18.1.6-24.6-6.7-6.4-5.6-8.6-15.1-5.8-23.7l29.6-88.8c2.8-8.3 7.4-15.8 13.6-21.9L339.7 74.34l98 97.96z"
-    />
-    <path
-      d="M0 160c0-53.9 42.98-96 96-96h96c17.7 0 32 14.33 32 32 0 17.7-14.3 32-32 32H96c-17.67 0-32 14.3-32 32v256c0 17.7 14.33 32 32 32h256c17.7 0 32-14.3 32-32v-96c0-17.7 14.3-32 32-32s32 14.3 32 32v96c0 53-43 96-96 96H96c-53.02 0-96-43-96-96V160z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const ChildReaching = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 384 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M155.7 170.2c11.6 2.9 23.9 5.8 36.5 5.8 39.9 0 77.1-20.2 98.8-53.6l18.2-27.86c9.6-14.81 29.4-19 44.3-9.36 14.8 9.64 19 29.42 9.3 44.32l-18.1 27.8c-18.3 28.1-43.5 50-72.7 64.3V480c0 17.7-14.3 32-32 32s-32-14.3-32-32v-96h-32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V221.4c-28.37-14-53.06-35.3-71.13-63.3l-19.5-28.3c-9.8-14.8-5.83-34.62 8.88-44.43 14.7-9.8 34.57-5.83 44.37 8.88l19.5 29.25c14.38 21.5 35.08 37.4 58.78 45.8 1 .2 1.9.5 2.8.9z"
-    />
-    <path
-      d="M256 64c0 35.35-28.7 64-64 64s-64-28.65-64-64 28.7-64 64-64 64 28.65 64 64z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const School = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M336 160h16c8.8 0 16 7.2 16 16s-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-32c0-8.8 7.2-16 16-16s16 7.2 16 16v16zM80 208c0-8.8 7.16-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.84 0-16-7.2-16-16v-64zm416 0c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-64zM128 320c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.84 0-16-7.2-16-16v-64c0-8.8 7.16-16 16-16h32zm368 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-64z"
-    />
-    <path
-      d="m476.8 98.06 125.6 27.04c22 5.8 37.6 25.2 37.6 47.7V464c0 26.5-21.5 48-48 48H48c-26.51 0-48-21.5-48-48V172.8c0-22.5 15.63-41.9 37.59-47.7L163.2 98.06l139-92.686c9.9-7.165 24.8-7.165 35.6 0l139 92.686zM256 512h128v-96c0-35.3-28.7-64-64-64s-64 28.7-64 64v96zM96 192c-8.84 0-16 7.2-16 16v64c0 8.8 7.16 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16H96zm400 80c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v64zM96 320c-8.84 0-16 7.2-16 16v64c0 8.8 7.16 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16H96zm400 80c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v64zM320 264c48.6 0 88-39.4 88-88s-39.4-88-88-88-88 39.4-88 88 39.4 88 88 88z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const SchoolFlag = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 576 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M288 0h112c8.8 0 16 7.164 16 16v48c0 8.84-7.2 16-16 16h-80v15.53l-13.4-9.57c-11.1-7.95-26.1-7.95-37.2 0L256 95.53V32c0-17.67 14.3-32 32-32zM64 240c0-8.8 7.16-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.84 0-16-7.2-16-16v-64zm384 0c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-64zM112 352c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H80c-8.84 0-16-7.2-16-16v-64c0-8.8 7.16-16 16-16h32zm336 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16h-32c-8.8 0-16-7.2-16-16v-64z"
-    />
-    <path
-      d="M410.3 160H512c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H336V400c0-26.5-21.5-48-48-48s-48 21.5-48 48v112H64c-35.35 0-64-28.7-64-64V224c0-35.3 28.65-64 64-64h101.7l103.7-74.04c11.1-7.95 26.1-7.95 37.2 0L410.3 160zM288 192c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zM80 224c-8.84 0-16 7.2-16 16v64c0 8.8 7.16 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16H80zm368 80c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v64zM80 352c-8.84 0-16 7.2-16 16v64c0 8.8 7.16 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16H80zm384 0c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-64c0-8.8-7.2-16-16-16h-32z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const BuildingColumns = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M492.6 98.59c14 6.01 21.8 21.01 18.7 35.81-3 14.9-16.1 25.6-31.3 25.6v8c0 13.3-10.7 24-24 24H56c-13.25 0-24-10.7-24-24v-8c-15.19-.9-28.289-10.7-31.343-25.6-3.055-14.8 4.776-29.8 18.743-35.81l224-96.003c8-3.45 17.2-3.45 25.2 0l224 96.003zM256 128c17.7 0 32-14.3 32-32 0-17.67-14.3-32-32-32s-32 14.33-32 32c0 17.7 14.3 32 32 32z"
-    />
-    <path
-      d="M127.1 416h40V224h64v192H280V224h64v192h40V224h64v196.3c.6.3 1.2-.2 1.8 1.1l48 32c11.7 7.8 16.9 22.4 12.8 35.9-4.1 13.5-16.5 22.7-30.6 22.7H31.1c-13.2 0-25.642-9.2-29.728-22.7-4.087-13.5 1.143-28.1 12.878-35.9l48-32c.57-1.3 1.15-.8.85-1.1V224h64v192z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const GraduationCap = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M640 160c0 10.38-6.438 19.65-16.05 23.09l-282.7 101.2a62.951 62.951 0 0 1-42.43 0L108.2 216.1c13.7-15.2 30.9-26.6 52.8-31.9l162.9-40.72c8.594-2.141 13.78-10.83 11.66-19.39-2.125-8.594-10.97-13.89-19.41-11.64L153.3 153.2c-31.9 8-58.7 26.6-77.23 51.4l-60.02-21.5C6.438 179.6 0 170.4 0 160s6.438-19.65 16.05-23.09l282.7-101.2a62.951 62.951 0 0 1 42.43 0l282.7 101.2C633.6 140.4 640 149.6 640 160zM351.1 314.4c-9.4 3.7-20.2 5.6-31.1 5.6a94.767 94.767 0 0 1-32-5.555L142.8 262.5 128 405.3c0 41.3 85.1 74.7 192 74.7 105.1 0 192-33.4 192-74.67l-14.78-142.9L351.1 314.4z"
-    />
-    <path
-      d="M323.9 143.5 161 184.2c-39.4 9.9-68.6 40.8-77.72 78.9C90.83 268.1 96 277.7 96 288c0 9.953-4.814 18.49-11.94 24.36l24.83 149C110.5 471.1 103 480 93.11 480H34.89c-9.887 0-17.41-8.879-15.78-18.63l24.83-149C36.81 306.5 32 297.1 32 288c0-13.24 8.047-24.61 19.52-29.47 11.02-50.84 49.58-92.28 101.7-105.3l162.9-40.72c8.438-2.25 17.28 3.047 19.41 11.64 2.17 8.55-3.03 17.25-11.63 19.35z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const Briefcase = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M464 96h-80V48c0-25.59-22.4-48-48-48H176c-25.6 0-48 22.41-48 48v48H48c-25.59 0-48 22.4-48 48v144h512V144c0-25.6-22.4-48-48-48zm-128 0H176V48h160v48z"
-    />
-    <path
-      d="M320 336c0 8.844-7.156 16-16 16h-96c-8.8 0-16-7.2-16-16v-48H0v144c0 25.6 22.41 48 48 48h416c25.59 0 48-22.41 48-48V288H320v48z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const Family = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M256 224c26.53 0 48-21.47 48-48s-21.5-48-48-48-48 21.5-48 48 21.5 48 48 48zm32 32h-64c-26.5 0-48 21.5-48 48v48c0 17.67 14.33 32 32 32v96c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-96c17.67 0 32-14.33 32-32v-48c0-26.5-21.5-48-48-48z"
-    />
-    <path
-      d="M384 128c35.38 0 64-28.62 64-64S419.38 0 384 0s-64 28.62-64 64 28.6 64 64 64zm-256 0c35.38 0 64-28.62 64-64S163.4 0 128 0 64 28.62 64 64s28.63 64 64 64zm383.4 235.6-48.22-168.8C457.3 174.2 438.4 160 416.1 160h-65.99c-5.713 0-11.17 1.143-16.32 3.014C335.4 167.3 336 171.6 336 176c0 20.31-7.609 38.88-20.13 53.01C346.3 240.3 368 269.7 368 304v48c0 23.64-12.88 44.33-32 55.41V480c0 8.461-1.736 16.5-4.732 23.9C336.9 508.8 343.1 512 352 512h64c17.67 0 32-14.33 32-32v-96h47.99c10.61 0 18.31-10.2 15.41-20.4zM196.1 229c-12.5-14.1-20.1-32.7-20.1-53 0-4.561.61-8.965 1.347-13.32C171.8 161.1 166.1 160 160 160H96c-35.35 0-64 28.7-64 64v96c0 17.67 14.33 32 32 32v128c0 17.67 14.33 32 32 32h64c8.014 0 15.12-3.229 20.73-8.096C177.7 496.5 176 488.5 176 480v-72.59c-19.1-11.11-32-31.81-32-55.41v-48c0-34.3 21.7-63.7 52.1-75z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const PeopleGroup = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M384 96c0 35.3-28.7 64-64 64s-64-28.7-64-64c0-35.35 28.7-64 64-64s64 28.65 64 64zm0 352c0 17.7-14.3 32-32 32h-64c-17.7 0-32-14.3-32-32v-42.8c-37.8-18-64-56.5-64-101.2 0-61.9 50.1-112 112-112h32c61.9 0 112 50.1 112 112 0 44.7-26.2 83.2-64 101.2V448zM256 261.7c-10 11.2-16 26.1-16 42.3 0 16.2 6 31.1 16 42.3v-84.6zM400 304c0-16.2-6.9-31.1-16-42.3v84.6c9.1-11.3 16-26.1 16-42.3z"
-    />
-    <path
-      d="M64 96c0-35.35 28.65-64 64-64 35.3 0 64 28.65 64 64 0 35.3-28.7 64-64 64-35.35 0-64-28.7-64-64zm128 298.5V448c0 17.7-14.3 32-32 32H96c-17.67 0-32-14.3-32-32v-42.8C26.16 387.2 0 348.7 0 304c0-61.9 50.14-112 112-112h32c19.7 0 38.3 5.1 54.4 14.1-23.8 25.7-38.4 60.1-38.4 97.9 0 34.3 11.1 65.8 32 90.5zM64 346.3v-84.6c-9.96 11.2-16 26.1-16 42.3 0 16.2 6.04 31.1 16 42.3zm384 48.2c20-24.7 32-56.2 32-90.5 0-37.8-14.6-72.2-38.4-97.9 16.1-9 34.7-14.1 54.4-14.1h32c61.9 0 112 50.1 112 112 0 44.7-26.2 83.2-64 101.2V448c0 17.7-14.3 32-32 32h-64c-17.7 0-32-14.3-32-32v-53.5zM592 304c0-16.2-6.9-31.1-16-42.3v84.6c9.1-11.3 16-26.1 16-42.3zM448 96c0-35.35 28.7-64 64-64s64 28.65 64 64c0 35.3-28.7 64-64 64s-64-28.7-64-64z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
-
-export const PersonChalkboard = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      className="fa-primary"
-      d="M320 128V48c0-26.51 21.5-48 48-48h224c26.5 0 48 21.49 48 48v224c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48v-48h64v32h192V64H384v64h-64z"
-    />
-    <path
-      d="M240 48c0 26.51-21.5 48-48 48s-48-21.49-48-48 21.5-48 48-48 48 21.49 48 48zm-56 304v128c0 17.7-14.3 32-32 32s-32-14.3-32-32V256.9l-28.57 47.6c-9.1 15.1-28.76 20-43.91 10.9-15.15-9.1-20.05-28.7-10.94-43.9l58.27-96.9C112.2 145.7 143.4 128 177.1 128H400c17.7 0 32 14.3 32 32s-14.3 32-32 32H264v288c0 17.7-14.3 32-32 32s-32-14.3-32-32V352h-16z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
diff --git a/app/icons/light.tsx b/app/icons/light.tsx
deleted file mode 100644
index 316e557..0000000
--- a/app/icons/light.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from 'react'
-
-export const ChildReaching = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 384 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M256 64c0 35.35-28.7 64-64.9 64-34.4 0-64-28.65-64-64s29.6-64 64-64C227.3 0 256 28.65 256 64zm-64.9-32c-16.8 0-32 14.33-32 32s15.2 32 32 32c18.6 0 32.9-14.33 32.9-32s-14.3-32-32.9-32zM112 188c-27.81-14.8-51.41-37.4-67.52-65.8l-10.39-18.3c-4.36-7.69-1.67-17.45 6.02-21.81 7.68-4.37 17.45-1.67 21.81 6.01l10.39 18.3c24.42 43 70.09 69.6 119.59 69.6 48.8 0 93.2-26 118.7-68.2l11.6-19.86c4.4-7.64 14.2-10.21 21.9-5.76 7.6 4.45 10.2 14.25 5.7 21.92l-11.6 19.8c-16 27.5-39.1 49.4-66.2 64V496c0 8.8-7.2 16-16 16s-16-7.2-16-16V384h-96v112c0 8.8-7.2 16-16 16s-16-7.2-16-16V188zm32 13.1V352h96V201c-15.4 4.6-31.6 7-48.1 7s-32.6-2.4-47.9-6.9z" />
-  </svg>
-)
-
-export const School = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 640 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M96 223.1c0-16.8 14.3-32 32-32h32c17.7 0 32 15.2 32 32v32c0 18.6-14.3 32-32 32h-32c-17.7 0-32-13.4-32-32v-32zm64 0h-32v32h32v-32zm352-32c17.7 0 32 15.2 32 32v32c0 18.6-14.3 32-32 32h-32c-17.7 0-32-13.4-32-32v-32c0-16.8 14.3-32 32-32h32zm-32 64h32v-32h-32v32zM96 352c0-17.7 14.3-32.9 32-32.9h32c17.7 0 32 15.2 32 32.9v64c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-64zm64 0h-32v64h32v-64zm352-32.9c17.7 0 32 15.2 32 32.9v64c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32.9 32-32.9h32zM480 416h32v-64h-32v64zM336 175.1h8c8.8 0 16 8.1 16 16 0 9.7-7.2 16-16 16h-24c-8.8 0-16-6.3-16-16v-32c0-7.9 7.2-16 16-16s16 8.1 16 16v16zm-112 16c0-53 42.1-96 96-96 53 0 96 43 96 96 0 53.9-43 96-96 96-53.9 0-96-42.1-96-96zm96 64c35.3 0 64-27.8 64-64 0-34.4-28.7-64-64-64s-64 29.6-64 64c0 36.2 28.7 64 64 64zm150.8-142 117.8 23.5c29.9 6 51.4 32.2 51.4 62.8V448c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V199.4c0-30.6 21.53-56.8 51.45-62.8l117.75-23.5 141-109.73c4.9-4.493 13.8-4.493 19.6 0l141 109.73zM384 384v96h192c17.7 0 32-14.3 32-32V199.4c0-15.3-10.8-29.3-25.7-32.3l-121.4-23.4c-2.5-.5-4.8-1.5-6.7-3.1L320 36.27 185.8 140.6c-1.9 1.6-4.2 2.6-6.7 3.1L57.72 167.1c-14.95 3-25.72 17-25.72 32.3V448c0 17.7 14.33 32 32 32h192v-96c0-35.3 28.7-64.9 64-64.9s64 29.6 64 64.9zm-32 96v-96c0-17.7-14.3-32-32-32s-32 14.3-32 32v96h64z" />
-  </svg>
-)
-
-export const SchoolFlag = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 576 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M352 240c0 35.3-28.7 64-64 64s-64-28.7-64-64 28.7-64 64-64 64 28.7 64 64zm-64 32c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zM64 256c0-17.7 14.33-32 32-32h32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32H96c-17.67 0-32-14.3-32-32v-32zm64 0H96v32h32v-32zm352-32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h32zm-32 64h32v-32h-32v32zM64 384c0-17.7 14.33-32 32-32h32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32H96c-17.67 0-32-14.3-32-32v-32zm64 0H96v32h32v-32zm352-32c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h32zm-32 64h32v-32h-32v32zM272 16c0-8.836 7.2-16 16-16h112c8.8 0 16 7.164 16 16v64c0 8.84-7.2 16-16 16h-84.5l89.6 64H512c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V224c0-35.3 28.65-64 64-64h106.9L272 87.77V16zm112 48V32h-80v32h80zm-64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64h64v-64zm192 64c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H400c-3.3 0-6.6-1.9-9.3-3L288 115.7 185.3 189c-2.7 1.1-6 3-9.3 3H64c-17.67 0-32 14.3-32 32v224c0 17.7 14.33 32 32 32h160v-64c0-35.3 28.7-64 64-64s64 28.7 64 64v64h160z" />
-  </svg>
-)
-
-export const BuildingColumns = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 512 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path d="M496.2 133.7c8.9 5.6 15.8 15.9 15.8 27.1 0 17.2-14 31.2-31.2 31.2H31.16C13.95 192 0 178 0 160.8c0-11.2 6.035-21.5 15.8-27.1L248.1 2.08c4.9-2.773 10-2.773 15.8 0L496.2 133.7zM477.7 160 256 34.39 34.34 160H205.4c-3.5-7.3-5.4-15.4-5.4-24 0-30.9 25.1-56 56-56s56 25.1 56 56c0 8.6-1.9 16.7-5.4 24h171.1zM256 160c13.3 0 24-10.7 24-24s-10.7-24-24-24-24 10.7-24 24 10.7 24 24 24zM64 224h32v128h80V224h32v128h96V224h32v128h80V224h32v128c8.8 0 16 7.2 16 16s-7.2 16-16 16H64c-8.84 0-16-7.2-16-16s7.16-16 16-16V224zm408 192c8.8 0 16 7.2 16 16s-7.2 16-16 16H40c-8.84 0-16-7.2-16-16s7.16-16 16-16h432zm24 64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.836 0-16-7.2-16-16s7.164-16 16-16h480z" />
-  </svg>
-)
diff --git a/app/icons/solid.tsx b/app/icons/solid.tsx
deleted file mode 100644
index 394759e..0000000
--- a/app/icons/solid.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from 'react'
-
-export const ChevronRight = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 320 512"
-    role="img"
-    fill="currentColor"
-    {...props}
-  >
-    <path
-      d="M96 480c-8.188 0-16.38-3.125-22.62-9.375-12.5-12.5-12.5-32.75 0-45.25L242.8 256 73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"
-      style={{
-        opacity: 0.4,
-      }}
-    />
-  </svg>
-)
diff --git a/app/model/categories.ts b/app/model/categories.ts
index 6ab053e..b69eabb 100644
--- a/app/model/categories.ts
+++ b/app/model/categories.ts
@@ -1,28 +1,11 @@
-import {
-  ChildReaching,
-  School,
-  SchoolFlag,
-  BuildingColumns,
-  GraduationCap,
-  Briefcase,
-  PeopleGroup,
-  Family,
-  PersonChalkboard,
-} from '../icons/duotone'
-import {
-  ChildReaching as LChildReaching,
-  School as LSchool,
-  SchoolFlag as LSchoolFlag,
-  BuildingColumns as LBuildingColumns,
-} from '../icons/light'
-
 export type Categories = Category[]
 
 export type Category = {
   title: string
   slug: string
   description: string
-  icon: (props: React.SVGProps<SVGSVGElement>) => React.ReactElement
+  iconSet: 'duotone' | 'light'
+  iconId: string
   iconForeground: string
   iconBackground: string
 }
@@ -31,7 +14,8 @@ export const categories: Categories = [
   {
     title: 'PAUD',
     slug: 'paud',
-    icon: LChildReaching,
+    iconSet: 'light',
+    iconId: 'child-reaching',
     description: 'Pendidikan Anak Usia Dini',
     iconForeground: 'text-teal-700',
     iconBackground: 'bg-teal-50',
@@ -40,7 +24,8 @@ export const categories: Categories = [
     title: 'PAUD ke atas',
     slug: 'paud-ke-atas',
     description: 'Usia tiga tahun ke atas',
-    icon: ChildReaching,
+    iconSet: 'duotone',
+    iconId: 'child-reaching',
     iconForeground: 'text-teal-700',
     iconBackground: 'bg-teal-50',
   },
@@ -48,7 +33,8 @@ export const categories: Categories = [
     title: 'SD',
     slug: 'sd',
     description: 'Sekolah Dasar',
-    icon: LSchool,
+    iconSet: 'light',
+    iconId: 'school',
     iconForeground: 'text-purple-700',
     iconBackground: 'bg-purple-50',
   },
@@ -56,7 +42,8 @@ export const categories: Categories = [
     title: 'SD ke atas',
     slug: 'sd-ke-atas',
     description: 'Usia enam tahun ke atas',
-    icon: School,
+    iconSet: 'duotone',
+    iconId: 'school',
     iconForeground: 'text-purple-700',
     iconBackground: 'bg-purple-50',
   },
@@ -64,7 +51,8 @@ export const categories: Categories = [
     title: 'SMP',
     slug: 'smp',
     description: 'Sekolah Menengah Pertama',
-    icon: LSchoolFlag,
+    iconSet: 'light',
+    iconId: 'school-flag',
     iconForeground: 'text-sky-700',
     iconBackground: 'bg-sky-50',
   },
@@ -72,7 +60,8 @@ export const categories: Categories = [
     title: 'SMP ke atas',
     slug: 'smp-ke-atas',
     description: 'Usia 12 tahun ke atas',
-    icon: SchoolFlag,
+    iconSet: 'duotone',
+    iconId: 'school-flag',
     iconForeground: 'text-sky-700',
     iconBackground: 'bg-sky-50',
   },
@@ -80,7 +69,8 @@ export const categories: Categories = [
     title: 'SMA',
     slug: 'sma',
     description: 'Sekolah Menengah Atas',
-    icon: LBuildingColumns,
+    iconSet: 'light',
+    iconId: 'building-columns',
     iconForeground: 'text-yellow-700',
     iconBackground: 'bg-yellow-50',
   },
@@ -88,7 +78,8 @@ export const categories: Categories = [
     title: 'SMA ke atas',
     slug: 'sma-ke-atas',
     description: 'Usia 15 tahun ke atas',
-    icon: BuildingColumns,
+    iconSet: 'duotone',
+    iconId: 'building-columns',
     iconForeground: 'text-yellow-700',
     iconBackground: 'bg-yellow-50',
   },
@@ -96,7 +87,8 @@ export const categories: Categories = [
     title: 'Kuliah',
     slug: 'kuliah',
     description: 'Perguruan Tinggi',
-    icon: GraduationCap,
+    iconSet: 'duotone',
+    iconId: 'graduation-cap',
     iconForeground: 'text-indigo-700',
     iconBackground: 'bg-indigo-50',
   },
@@ -104,7 +96,8 @@ export const categories: Categories = [
     title: 'Profesional',
     slug: 'profesional',
     description: 'Pekerja Profesional',
-    icon: Briefcase,
+    iconSet: 'duotone',
+    iconId: 'briefcase',
     iconForeground: 'text-rose-700',
     iconBackground: 'bg-rose-50',
   },
@@ -112,7 +105,8 @@ export const categories: Categories = [
     title: 'Semua Usia',
     slug: 'semua-usia',
     description: 'Untuk semua kalangan',
-    icon: PeopleGroup,
+    iconSet: 'duotone',
+    iconId: 'people-group',
     iconForeground: 'text-lime-700',
     iconBackground: 'bg-lime-50',
   },
@@ -120,7 +114,8 @@ export const categories: Categories = [
     title: 'For Parents',
     slug: 'for-parents',
     description: 'Untuk dipelajari oleh orang tua',
-    icon: Family,
+    iconSet: 'duotone',
+    iconId: 'family',
     iconForeground: 'text-emerald-700',
     iconBackground: 'bg-emerald-50',
   },
@@ -135,7 +130,8 @@ const uncategorized: Category = {
   title: 'Belum Terkategorikan',
   slug: 'belum-terkategorikan',
   description: 'Belum teridentifikasi untuk kategori usia tertentu',
-  icon: PersonChalkboard,
+  iconSet: 'duotone',
+  iconId: 'person-chalkboard',
   iconForeground: 'text-amber-700',
   iconBackground: 'bg-amber-50',
 }