Update iconography foundation pg.mdx

site/docs/foundations/iconography.mdx

@@ -3,10 +3,86 @@ title: Iconography
 layout: DetailTechnical
 ---
 
-Icons are visually simplified and recognizable symbols that represent a specific action, object or concept. There are two variant types: Outline and Solid. All icons within the icon set have an outline variant, but not all have a solid variant, for instance, `minimize` (a horizontal dash).
+Icons are simplified visual representations of a specific action, object or concept. Country symbols represent a specific country and are used in contexts where geographical identification is necessary.
+
+The Salt design system has:
+
+- 415 icons
+- 265 outline icons
+- 150 solid icons
+
+## Icon variants
+
+Icons come in two variant types: **Outline** and **Solid**. Please note that all icons within the icon set have an outline variant, but 115 don’t have a solid variant.
+
+### Solid icons
+
+Solid icons are faster to recognise than outline icons due to less visual noise, especially depending on the complexity of the icon. Solid icons better represent how we view objects, whereas outline icons are silhouettes and therefore can take longer to perceive.
+
+### Outline icons
+
+Outline icons have a lower emphasis on non-imperative items and are more recognisable when they have wider inner spacing. They’re also better to use when you need to make subtle design cues more noticeable.
+
+<Image
+  src="/img/foundations/iconography-icon-variants.png"
+  alt="Example of solid and outline icons"
+/>
 
 ## All icons
 
 <IconPreview />
 
+## Scaling icons with size icon
+
+Icon size will vary based on use case and system requirements. Standard sizing ensures components maintain a consistent spatial relationship with surrounding elements.
+
+<ImageSwitcher
+  images={[
+    { src: "/img/foundations/scale-icon.svg", alt: "" },
+    { src: "/img/foundations/scale-icon-annotated.svg", alt: "" },
+  ]}
+  label="Show multipliers"
+/>
+
+| Size token         | Multiplier | High density (px) | Medium | Low | Touch |
+| ------------------ | ---------- | ----------------- | ------ | --- | ----- |
+| `--salt-size-icon` | x1         | 12\*              | 12     | 14  | 16    |
+|                    | x2         | 20                | 24     | 28  | 32    |
+|                    | x3         | 30                | 36     | 42  | 48    |
+|                    | x4         | 40                | 48     | 56  | 64    |
+
+\* Icons have a minimum size set at 12px and should not be displayed any smaller. For high density this means the default size of an icon is 12px, but the rest of the scale grows based on small base dimension.
+
+## Country symbols
+
+Country symbols can be considered icons that are visually representative of a country or inter-governmental organisation. All flags are available in both circle and rectangle shapes.
+
+<Image
+  src="/img/foundations/iconography-countrysymbols-variant.png"
+  alt="Example of circular flag next to rectangular flag"
+/>
+
+## All country symbols
+
+<CountrySymbolPreview />
+
+## Scaling country symbols with size base
+
+Country symbols have a default size across all four densities, changed in multiples of the base size.
+
+<ImageSwitcher
+  images={[
+    { src: "/img/foundations/scale-country.svg", alt: "" },
+    { src: "/img/foundations/scale-country-annotated.svg", alt: "" },
+  ]}
+  label="Show multipliers"
+/>
+
+| Size token         | Multiplier | High density (px) | Medium | Low | Touch |
+| ------------------ | ---------- | ----------------- | ------ | --- | ----- |
+| `--salt-size-base` | x1         | 20                | 28     | 36  | 44    |
+|                    | x2         | 40                | 56     | 72  | 88    |
+|                    | x3         | 60                | 84     | 108 | 132   |
+|                    | x4         | 80                | 112    | 144 | 176   |
+
 :fragment{src="./fragments/feedback.mdx"}

site/src/components/country-symbol-preview/CountrySymbolPreview.tsx

@@ -0,0 +1,63 @@
+import {
+  FlowLayout,
+  FormField,
+  FormFieldLabel,
+  Input,
+  StackLayout,
+  Text,
+} from "@salt-ds/core";
+import { LazyCountrySymbol, countryMetaMap } from "@salt-ds/countries";
+import { Suspense, useState } from "react";
+
+// Mostly the same as AllCountrySymbols site example, could iterate later
+export const CountrySymbolPreview = () => {
+  const [inputText, setInputText] = useState("");
+
+  return (
+    <Suspense fallback="Loading...">
+      <StackLayout
+        separators
+        style={{ width: "100%", height: "100%", padding: 10 }}
+      >
+        <FormField>
+          <FormFieldLabel>Search country symbols</FormFieldLabel>
+          <Input
+            value={inputText}
+            inputProps={{
+              onChange: (event) => {
+                setInputText(event.target.value);
+              },
+            }}
+          />
+        </FormField>
+        <div style={{ overflow: "auto", maxHeight: 600 }}>
+          <FlowLayout gap={3}>
+            {Object.values(countryMetaMap)
+              .filter(({ countryCode, countryName }) => {
+                const searchText = inputText.toLowerCase();
+
+                return (
+                  countryCode.toLowerCase().includes(searchText) ||
+                  countryName.toLowerCase().includes(searchText)
+                );
+              })
+              .map(({ countryCode, countryName }) => {
+                return (
+                  <StackLayout
+                    style={{ width: 140 }}
+                    gap={1}
+                    align="center"
+                    key={countryCode}
+                  >
+                    <LazyCountrySymbol code={countryCode} size={1} />
+                    <Text>{countryCode}</Text>
+                    <Text style={{ textAlign: "center" }}>{countryName}</Text>
+                  </StackLayout>
+                );
+              })}
+          </FlowLayout>
+        </div>
+      </StackLayout>
+    </Suspense>
+  );
+};

site/src/components/country-symbol-preview/index.ts

@@ -0,0 +1 @@
+export * from "./CountrySymbolPreview";

site/src/components/index.ts

@@ -7,6 +7,7 @@ export * from "./callout";
 export * from "./card";
 
 export * from "./components";
+export * from "./country-symbol-preview";
 export * from "./diagrams";
 export * from "./example-container";
 export * from "./footer";