diff --git a/editor/src/components/inspector/controls/select-control.tsx b/editor/src/components/inspector/controls/select-control.tsx
index bde06840abe0..6aa5a15517d3 100644
--- a/editor/src/components/inspector/controls/select-control.tsx
+++ b/editor/src/components/inspector/controls/select-control.tsx
@@ -28,7 +28,7 @@ export interface DEPRECATEDSelectControlOptions extends DEPRECATEDGenericControl
 
 export interface SelectOption {
   value: any
-  icon?: IcnProps
+  icon?: Omit<IcnProps, 'color' | 'width' | 'height'>
   label?: string
   style?: React.CSSProperties
   options?: SelectOption[]
diff --git a/editor/src/components/inspector/fill-hug-fixed-control.tsx b/editor/src/components/inspector/fill-hug-fixed-control.tsx
index 3897163367f3..faf7642c5607 100644
--- a/editor/src/components/inspector/fill-hug-fixed-control.tsx
+++ b/editor/src/components/inspector/fill-hug-fixed-control.tsx
@@ -56,7 +56,7 @@ import { fixedSizeDimensionHandlingText } from '../text-editor/text-handling'
 import { when } from '../../utils/react-conditionals'
 import type { LayoutPinnedPropIncludingCenter } from '../../core/layout/layout-helpers-new'
 import { isLayoutPinnedProp, type LayoutPinnedProp } from '../../core/layout/layout-helpers-new'
-import type { AllElementProps } from '../editor/store/editor-state'
+import type { AllElementProps, EditorState } from '../editor/store/editor-state'
 import { jsExpressionValue, emptyComments } from '../../core/shared/element-template'
 import type { EditorDispatch, EditorAction } from '../editor/action-types'
 import {
@@ -76,6 +76,7 @@ import {
   isConversionForbidden,
 } from '../canvas/canvas-strategies/strategies/group-conversion-helpers'
 import { notice } from '../common/notice'
+import createCachedSelector from 're-reselect'
 
 export const FillFixedHugControlId = (segment: 'width' | 'height'): string =>
   `hug-fixed-fill-${segment}`
@@ -106,18 +107,47 @@ export function selectOptionLabel(mode: FixedHugFillMode): string {
   }
 }
 
-function selectOption(mode: FixedHugFillMode): SelectOption {
-  return {
-    value: mode,
-    label: selectOptionLabel(mode),
+export function selectOptionIconType(
+  mode: FixedHugFillMode,
+  dimension: 'width' | 'height',
+): string {
+  switch (mode) {
+    case 'fill':
+      return `fill-${dimension}`
+    case 'fixed':
+      return `fixed-${dimension}`
+    case 'hug':
+      return `hug-${dimension}`
+    case 'hug-group':
+      return `hug-${dimension}`
+    case 'computed':
+      return `fixed-${dimension}`
+    case 'detected':
+      return `fixed-${dimension}`
+    default:
+      assertNever(mode)
   }
 }
 
-const fixedHugFillOptionsSelector = createSelector(
+const selectOption =
+  (dimension: 'width' | 'height') =>
+  (mode: FixedHugFillMode): SelectOption => {
+    return {
+      value: mode,
+      label: selectOptionLabel(mode),
+      icon: {
+        category: 'layout/commands',
+        type: selectOptionIconType(mode, dimension),
+      },
+    }
+  }
+
+const fixedHugFillOptionsSelector = createCachedSelector(
   metadataSelector,
   pathTreesSelector,
   selectedViewsSelector,
-  (metadata, pathTrees, selectedViews) => {
+  (_: MetadataSubstate, dimension: 'width' | 'height') => dimension,
+  (metadata, pathTrees, selectedViews, dimension) => {
     const applicableOptions: Array<FixedHugFillMode> = [
       ...intersection(
         selectedViews.map((selectedView) =>
@@ -126,9 +156,9 @@ const fixedHugFillOptionsSelector = createSelector(
       ),
     ]
 
-    return applicableOptions.map(selectOption)
+    return applicableOptions.map(selectOption(dimension))
   },
-)
+)((_, dimension: 'width' | 'height') => dimension)
 
 export const FillHugFixedControlOld = React.memo(() => {
   const onlyGroupChildrenSelected = useEditorState(
@@ -503,7 +533,7 @@ export const FixedHugDropdown = React.memo((props: { dimension: 'width' | 'heigh
 
   const fixedHugFillOptions = useEditorState(
     Substores.metadata,
-    fixedHugFillOptionsSelector,
+    (store) => fixedHugFillOptionsSelector(store, dimension),
     'FixedHugDropdown fixedHugFillOptions',
   )
 
@@ -511,7 +541,7 @@ export const FixedHugDropdown = React.memo((props: { dimension: 'width' | 'heigh
 
   return (
     <PopupList
-      value={optionalMap(selectOption, currentValue.fixedHugFill?.type) ?? undefined}
+      value={optionalMap(selectOption(dimension), currentValue.fixedHugFill?.type) ?? undefined}
       options={fixedHugFillOptions}
       onSubmitValue={onSubmitFixedFillHugType}
       controlStyles={getControlStyles(currentValue.controlStatus)}
diff --git a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
index 17499d3fa23c..3ee0941bbece 100644
--- a/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
+++ b/editor/src/core/performance/__snapshots__/performance-regression-tests.spec.tsx.snap
@@ -248,11 +248,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
@@ -291,11 +294,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
@@ -894,11 +900,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
@@ -937,11 +946,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
@@ -1696,11 +1708,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
@@ -1739,11 +1754,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
@@ -2435,11 +2453,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
@@ -2478,11 +2499,14 @@ Array [
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(ValueContainer)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.memo)(Icon)",
+  "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/div",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/span",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)",
   "/div/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)",
   "/UtopiaSpiedFunctionComponent(SingleValue)/UtopiaSpiedFunctionComponent(SingleValue)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
+  "/div/div/Icon/img",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/UtopiaSpiedClass(AutosizeInput)",
   "/Symbol(react.context)/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)",
   "/div/UtopiaSpiedFunctionComponent(Input)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 78d148d293aa..c24031c643b4 100644
--- a/editor/src/core/performance/performance-regression-tests.spec.tsx
+++ b/editor/src/core/performance/performance-regression-tests.spec.tsx
@@ -65,7 +65,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`700`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`706`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -127,7 +127,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`745`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`751`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -183,7 +183,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`606`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`612`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 
@@ -249,7 +249,7 @@ describe('React Render Count Tests -', () => {
 
     const renderCountAfter = renderResult.getNumberOfRenders()
     // if this breaks, GREAT NEWS but update the test please :)
-    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`678`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`684`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })
diff --git a/editor/src/uuiui/widgets/popup-list/popup-list.tsx b/editor/src/uuiui/widgets/popup-list/popup-list.tsx
index bbdacaec3293..083edb256e48 100644
--- a/editor/src/uuiui/widgets/popup-list/popup-list.tsx
+++ b/editor/src/uuiui/widgets/popup-list/popup-list.tsx
@@ -88,6 +88,8 @@ const Option = (props: OptionProps<SelectOption>) => {
     selectOption(data)
   }, [data, selectOption])
 
+  const iconShown = props.data.icon != null
+
   return (
     <Tooltip
       title={data.tooltip ?? ''}
@@ -98,8 +100,17 @@ const Option = (props: OptionProps<SelectOption>) => {
         <FlexRow style={{ width: CheckboxWidth, padding: CheckboxPadding, flexShrink: 0 }}>
           {props.isSelected ? '✓' : ''}
         </FlexRow>
-        {props.data.icon == null ? null : <Icn {...props.data.icon} />}
-        <span style={{ paddingLeft: 8 }}>{props.children}</span>
+        {props.data.icon == null ? null : (
+          <Icn
+            {...props.data.icon}
+            // We override the color prop here so it can switch between dark and light depending on whether its highlighted (to always contrast the background)
+            color={props.isFocused ? 'on-highlight-main' : 'main'}
+            width={16}
+            height={16}
+            style={{ marginLeft: 4 }}
+          />
+        )}
+        <span style={{ paddingLeft: iconShown ? 4 : 8 }}>{props.children}</span>
       </FlexRow>
     </Tooltip>
   )
@@ -428,13 +439,40 @@ const DropdownIndicator: React.FunctionComponent<
 }
 
 const SingleValue = (props: SingleValueProps<SelectOption>) => {
+  const iconShown = props.data.icon != null
+
   return (
-    <components.SingleValue {...props}>
-      {props.data.icon == null ? null : <Icn {...props.data.icon} />}
-      <span style={{ paddingLeft: 4 }}>{props.children}</span>
+    <components.SingleValue
+      {...props}
+      getStyles={(name: string, p: any) => {
+        return { ...props.getStyles(name, p), margin: iconShown ? -4 : 0 }
+      }}
+    >
+      {props.data.icon == null ? null : (
+        <div
+          style={{
+            position: 'absolute',
+            width: 20,
+            height: 20,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <Icn
+            {...props.data.icon}
+            color='secondary' // SingleValue is the "closed state" of the popupList, for these we want to show the subtle grey colored icon
+            width={16}
+            height={16}
+            style={{ scale: '80%' }}
+          />
+        </div>
+      )}
+      <span style={{ paddingLeft: iconShown ? 22 : 4 }}>{props.children}</span>
     </components.SingleValue>
   )
 }
+SingleValue.displayName = 'SingleValue'
 
 const displayNone: styleFn = () => ({
   display: 'none',