IFRCGo · frozenhelium · Apr 11, 2026
diff --git a/app/package.json b/app/package.json
@@ -23,9 +23,9 @@
         "generate:type:risk-api": "openapi-typescript ../go-risk-module-api/openapi-schema.yaml -o ./generated/riskTypes.ts --alphabetize",
         "generate:type:translations": "openapi-typescript ../cacheppuccino/openapi.json -o ./generated/translationTypes.ts --alphabetize",
         "prestart": "pnpm initialize:type",
-        "start": "pnpm -F @ifrc-go/ui build && vite",
+        "start": "pnpm -F @ifrc-go/ui build && pnpm -F @ifrc-go/icons build && vite",
         "prebuild": "pnpm initialize:type",
-        "build": "pnpm -F @ifrc-go/ui build && vite build",
+        "build": "pnpm -F @ifrc-go/ui build && pnpm -F @ifrc-go/icons build && vite build",
         "preview": "vite preview",
         "pretypecheck": "pnpm initialize:type",
         "typecheck": "tsc",
@@ -41,7 +41,7 @@
         "surge:teardown": "branch=$(git rev-parse --symbolic-full-name --abbrev-ref HEAD); branch=$(echo $branch  | tr ./ -); surge teardown https://ifrc-go-$branch.surge.sh"
     },
     "dependencies": {
-        "@ifrc-go/icons": "^2.0.1",
+        "@ifrc-go/icons": "workspace:^",
         "@ifrc-go/ui": "workspace:^",
         "@sentry/react": "^10.0.0",
         "@tinymce/tinymce-react": "^6.0.0",

diff --git a/app/src/components/GoMapContainer/styles.module.css b/app/src/components/GoMapContainer/styles.module.css
@@ -20,7 +20,7 @@
             border-radius: var(--go-ui-border-radius-md);
             background-color: var(--go-ui-color-foreground);
             padding: 0 var(--go-ui-spacing-2xs);
-            font-size: var(--go-ui-height-icon-multiplier);
+            font-size: 1.33em;
         }
 
         .map-disclaimer {

diff --git a/app/src/components/Link/index.tsx b/app/src/components/Link/index.tsx
@@ -121,10 +121,10 @@ function Link(props: Props) {
                 <>
                     {after}
                     {withLinkIcon && external && (
-                        <ArrowRightUpLineIcon className={styles.linkIcon} />
+                        <ArrowRightUpLineIcon />
                     )}
                     {withLinkIcon && !external && (
-                        <ChevronRightLineIcon className={styles.linkIcon} />
+                        <ChevronRightLineIcon />
                     )}
                 </>
             )}

diff --git a/app/src/components/Link/styles.module.css b/app/src/components/Link/styles.module.css
@@ -6,8 +6,4 @@
             text-decoration: underline;
         }
     }
-
-    .link-icon {
-        font-size: var(--go-ui-height-icon-multiplier);
-    }
 }
diff --git a/app/src/components/MapPopup/styles.module.css b/app/src/components/MapPopup/styles.module.css
@@ -36,7 +36,7 @@
         overflow: auto;
 
         .close-button {
-            font-size: var(--go-ui-height-icon-multiplier);
+            font-size: 1.33em;
         }
 
         .content {

diff --git a/app/src/components/NonFieldError/styles.module.css b/app/src/components/NonFieldError/styles.module.css
@@ -9,7 +9,7 @@
 
     .icon {
         flex-shrink: 0;
-         font-size: var(--go-ui-height-icon-multiplier);
+         font-size: 1.33em;
     }
 }
 

diff --git a/app/src/components/domain/DistrictSearchMultiSelectInput/styles.module.css b/app/src/components/domain/DistrictSearchMultiSelectInput/styles.module.css
@@ -1,3 +1,3 @@
 .icon {
-    font-size: var(--go-ui-height-icon-multiplier);
+    font-size: 1.33em;
 }
diff --git a/app/src/components/domain/DrefExportModal/styles.module.css b/app/src/components/domain/DrefExportModal/styles.module.css
@@ -1,5 +1,5 @@
 .dref-export-modal {
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 }
diff --git a/app/src/views/AccountMyFormsDref/DrefTableActions/styles.module.css b/app/src/views/AccountMyFormsDref/DrefTableActions/styles.module.css
@@ -1,3 +1,3 @@
 .icon {
-    font-size: var(--go-ui-height-icon-multiplier);
+    font-size: 1.33em;
 }
diff --git a/app/src/views/AccountMyFormsDref/styles.module.css b/app/src/views/AccountMyFormsDref/styles.module.css
@@ -9,6 +9,6 @@
     }
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 }
diff --git a/...rviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/styles.module.css b/...rviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportModal/styles.module.css
@@ -9,5 +9,5 @@
 }
 
 .icon {
-    font-size: var(--go-ui-height-icon-multiplier);
+    font-size: 1.33em;
 }
diff --git a/...iewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportSummary/styles.module.css b/...iewContextAndStructure/NationalSocietyLocalUnits/LocalUnitImportSummary/styles.module.css
@@ -1,6 +1,6 @@
 .bulk-upload-status {
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 
     .key-figure {

diff --git a/...NsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/styles.module.css b/...NsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitStatus/styles.module.css
@@ -3,7 +3,7 @@
     gap: var(--go-ui-spacing-xs);
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 
     &.validated {

diff --git a/...ewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css b/...ewContextAndStructure/NationalSocietyLocalUnits/LocalUnitValidateButton/styles.module.css
@@ -1,6 +1,6 @@
 .local-unit-validate-button {
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 }
 
@@ -9,6 +9,6 @@
     background-color: var(--go-ui-color-gray-40);
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 }
diff --git a/...ryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/styles.module.css b/...ryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/styles.module.css
@@ -8,7 +8,7 @@
     }
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 }
 

diff --git a/...rc/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/styles.module.css b/...rc/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/styles.module.css
@@ -17,5 +17,5 @@
 
 
 .icon {
-    font-size: var(--go-ui-height-icon-multiplier);
+    font-size: 1.33em;
 }
diff --git a/...c/views/CountryNsOverviewSupportingPartners/MembershipCoordinationTable/styles.module.css b/...c/views/CountryNsOverviewSupportingPartners/MembershipCoordinationTable/styles.module.css
@@ -1,7 +1,7 @@
 .membership-coordination-table {
     .icon {
         color: var(--go-ui-color-primary-red);
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 
     .sector-heading {

diff --git a/app/src/views/DrefFinalReportForm/Operation/styles.module.css b/app/src/views/DrefFinalReportForm/Operation/styles.module.css
@@ -4,7 +4,7 @@
     gap: var(--go-ui-spacing-2xl);
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 
     .intervention-selection-container {

diff --git a/app/src/views/DrefOperationalUpdateForm/Operation/styles.module.css b/app/src/views/DrefOperationalUpdateForm/Operation/styles.module.css
@@ -4,7 +4,7 @@
     gap: var(--go-ui-spacing-2xl);
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 
     .intervention-selection-container {

diff --git a/app/src/views/DrefOperationalUpdateForm/Submission/styles.module.css b/app/src/views/DrefOperationalUpdateForm/Submission/styles.module.css
@@ -11,7 +11,7 @@
         color: var(--go-ui-color-warning);
 
         .icon {
-            font-size: var(--go-ui-height-icon-multiplier);
+            font-size: 1.33em;
         }
     }
 }
diff --git a/app/src/views/DrefOperationalUpdateForm/styles.module.css b/app/src/views/DrefOperationalUpdateForm/styles.module.css
@@ -22,7 +22,7 @@
     }
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 
     .warnings {

diff --git a/app/src/views/OldDrefFinalReportForm/Operation/styles.module.css b/app/src/views/OldDrefFinalReportForm/Operation/styles.module.css
@@ -4,7 +4,7 @@
     gap: var(--go-ui-spacing-2xl);
 
     .icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 
     .intervention-selection-container {

diff --git a/app/src/views/PerPrioritizationForm/styles.module.css b/app/src/views/PerPrioritizationForm/styles.module.css
@@ -1,7 +1,7 @@
 .sort-by-dropdown-content {
     .checkmark {
         opacity: 0;
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
 
         &.active {
             opacity: 1;

diff --git a/app/src/views/RootLayout/index.tsx b/app/src/views/RootLayout/index.tsx
@@ -11,7 +11,10 @@ import {
     Outlet,
     useNavigation,
 } from 'react-router-dom';
-import { AlertInformationLineIcon } from '@ifrc-go/icons';
+import {
+    AlertInformationLineIcon,
+    IconsProvider,
+} from '@ifrc-go/icons';
 import {
     AlertContainer,
     Button,
@@ -425,64 +428,66 @@ export function Component() {
     return (
         <DomainContext.Provider value={domainContextValue}>
             <div className={styles.root}>
-                {(isLoading || isLoadingDebounced) && (
-                    <div
-                        className={_cs(
-                            styles.navigationLoader,
-                            !isLoading && isLoadingDebounced && styles.disappear,
-                        )}
-                    />
-                )}
-                <Navbar className={styles.navbar} />
-                <div className={styles.pageContent}>
-                    <Outlet />
-                </div>
-                <GlobalFooter className={styles.footer} />
-                <AlertContainer />
-                {(isCookiesBannerVisible || environment !== 'production') && (
-                    <div className={styles.bannersContainer}>
-                        {isCookiesBannerVisible && (
-                            <PageContainer className={styles.cookiesBanner}>
-                                <Container
-                                    // FIXME: use translation and actual heading
-                                    heading="Cookie Policy"
-                                    headerIcons={(
-                                        <AlertInformationLineIcon
-                                            className={styles.alertInfoIcon}
-                                        />
-                                    )}
-                                    headerActions={(
-                                        <ListView>
-                                            <Link
-                                                to="cookiePolicy"
-                                                colorVariant="text-on-dark"
-                                                styleVariant="translucent"
-                                                withLinkIcon
-                                            >
-                                                {strings.cookiesBannerLearnMore}
-                                            </Link>
-                                            <Button
-                                                name={undefined}
-                                                styleVariant="filled"
-                                                onClick={handleClick}
-                                            >
-                                                {strings.cookiesBannerIAccept}
-                                            </Button>
-                                        </ListView>
-                                    )}
-                                >
-                                    {strings.cookiesBannerDescription}
-                                </Container>
-                            </PageContainer>
-                        )}
-                        {environment !== 'production' && (
-                            <div className={styles.environmentBanner}>
-                                {/* NOTE: We are not translating alpha server names */}
-                                {environmentTexts[environment] ?? environment}
-                            </div>
-                        )}
+                <IconsProvider className={styles.goIcons}>
+                    {(isLoading || isLoadingDebounced) && (
+                        <div
+                            className={_cs(
+                                styles.navigationLoader,
+                                !isLoading && isLoadingDebounced && styles.disappear,
+                            )}
+                        />
+                    )}
+                    <Navbar className={styles.navbar} />
+                    <div className={styles.pageContent}>
+                        <Outlet />
                     </div>
-                )}
+                    <GlobalFooter className={styles.footer} />
+                    <AlertContainer />
+                    {(isCookiesBannerVisible || environment !== 'production') && (
+                        <div className={styles.bannersContainer}>
+                            {isCookiesBannerVisible && (
+                                <PageContainer className={styles.cookiesBanner}>
+                                    <Container
+                                        // FIXME: use translation and actual heading
+                                        heading="Cookie Policy"
+                                        headerIcons={(
+                                            <AlertInformationLineIcon
+                                                className={styles.alertInfoIcon}
+                                            />
+                                        )}
+                                        headerActions={(
+                                            <ListView>
+                                                <Link
+                                                    to="cookiePolicy"
+                                                    colorVariant="text-on-dark"
+                                                    styleVariant="translucent"
+                                                    withLinkIcon
+                                                >
+                                                    {strings.cookiesBannerLearnMore}
+                                                </Link>
+                                                <Button
+                                                    name={undefined}
+                                                    styleVariant="filled"
+                                                    onClick={handleClick}
+                                                >
+                                                    {strings.cookiesBannerIAccept}
+                                                </Button>
+                                            </ListView>
+                                        )}
+                                    >
+                                        {strings.cookiesBannerDescription}
+                                    </Container>
+                                </PageContainer>
+                            )}
+                            {environment !== 'production' && (
+                                <div className={styles.environmentBanner}>
+                                    {/* NOTE: We are not translating alpha server names */}
+                                    {environmentTexts[environment] ?? environment}
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </IconsProvider>
             </div>
         </DomainContext.Provider>
     );

diff --git a/app/src/views/RootLayout/styles.module.css b/app/src/views/RootLayout/styles.module.css
@@ -4,6 +4,14 @@
     flex-direction: column;
     min-height: 100vh;
 
+    .go-icons {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        line-height: 1;
+    }
+
     .banners-container {
         position: sticky;
         bottom: 0;

diff --git a/app/src/views/Search/styles.module.css b/app/src/views/Search/styles.module.css
@@ -37,6 +37,6 @@
     .close-icon,
     .forward-icon,
     .back-icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        font-size: 1.33em;
     }
 }
diff --git a/packages/icons/.gitignore b/packages/icons/.gitignore
@@ -0,0 +1,4 @@
+# Auto-generated by scripts/generate.ts — regenerated on every build.
+# Run `pnpm generate` (or `pnpm build`) to recreate after a fresh clone.
+src/components/
+src/icons.generated.ts
diff --git a/packages/icons/icons/add-box-fill.svg b/packages/icons/icons/add-box-fill.svg
diff --git a/packages/icons/icons/add-box-line.svg b/packages/icons/icons/add-box-line.svg
diff --git a/packages/icons/icons/add-circle-fill.svg b/packages/icons/icons/add-circle-fill.svg
diff --git a/packages/icons/icons/add-circle-line.svg b/packages/icons/icons/add-circle-line.svg
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,7 @@ @@
         .icon {
             flex-shrink: 0;
-             font-size: var(--go-ui-height-icon-multiplier);
+             font-size: 1.33em;
         }
     }
@@ Expand Down @@