diff --git a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
index 5e0a813e1b2e..c8d79179ea14 100644
--- a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
+++ b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
@@ -16,9 +16,17 @@ import type { OptionsType } from 'react-select'
 import { unsetPropertyMenuItem } from '../../../common/context-menu-items'
 import { UIGridRow } from '../../../widgets/ui-grid-row'
 import { PropertyLabel } from '../../../widgets/property-label'
-import { PopupList, useWrappedEmptyOrUnknownOnSubmitValue, NumberInput } from '../../../../../uuiui'
+import {
+  PopupList,
+  useWrappedEmptyOrUnknownOnSubmitValue,
+  NumberInput,
+  Icons,
+} from '../../../../../uuiui'
 import { useContextSelector } from 'use-context-selector'
 import type { FlexDirection } from '../../../common/css-utils'
+import { when } from '../../../../../utils/react-conditionals'
+import { Substores, useEditorState } from '../../../../editor/store/store-hook'
+import { flexDirectionSelector } from '../../../inpector-selectors'
 
 type uglyLabel =
   | 'left'
@@ -169,6 +177,11 @@ export const FlexWrapControl = React.memo((props: FlexWrapControlProps) => {
     },
     [onSubmit],
   )
+  const flexDirection = useEditorState(
+    Substores.metadata,
+    flexDirectionSelector,
+    'FlexWrapControl flexDirection',
+  )
 
   return (
     <InspectorContextMenuWrapper
@@ -181,13 +194,17 @@ export const FlexWrapControl = React.memo((props: FlexWrapControlProps) => {
         width: undefined,
       }}
     >
-      <PopupList
-        value={FlexWrapOptions.find((option) => option.value === props.value)}
-        options={FlexWrapOptions}
-        onSubmitValue={onSubmitValue}
-        controlStyles={props.controlStyles}
-        style={{ background: 'transparent' }}
-      />
+      <UIGridRow padded={false} variant='<-auto-><----------1fr--------->'>
+        {when(flexDirection.startsWith('row'), <Icons.WrapRow />)}
+        {when(flexDirection.startsWith('column'), <Icons.WrapColumn />)}
+        <PopupList
+          value={FlexWrapOptions.find((option) => option.value === props.value)}
+          options={FlexWrapOptions}
+          onSubmitValue={onSubmitValue}
+          controlStyles={props.controlStyles}
+          style={{ background: 'transparent' }}
+        />
+      </UIGridRow>
     </InspectorContextMenuWrapper>
   )
 })
@@ -241,17 +258,17 @@ export const FlexGapControl = React.memo(() => {
     onUnsetValues,
   )
 
-  const targetPath = useContextSelector(InspectorPropsContext, (contextData) => {
-    return contextData.targetPath
-  })
-  const flexGapProp = React.useMemo(() => {
-    return [stylePropPathMappingFn('gap', targetPath)]
-  }, [targetPath])
+  const flexDirection = useEditorState(
+    Substores.metadata,
+    flexDirectionSelector,
+    'FlexGapControl flexDirection',
+  )
 
   return (
     <InspectorContextMenuWrapper id={`gap-context-menu`} items={menuItems} data={{}}>
       <UIGridRow padded={false} variant='<-auto-><----------1fr--------->'>
-        <PropertyLabel target={flexGapProp}>Gap</PropertyLabel>
+        {when(flexDirection.startsWith('row'), <Icons.GapHorizontal />)}
+        {when(flexDirection.startsWith('column'), <Icons.GapVertical />)}
         <NumberInput
           id='flex.container.gap'
           testId='flex.container.gap'
diff --git a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx
index 626bfa4dee88..99658edf7674 100644
--- a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx
+++ b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/layout-system-controls.tsx
@@ -7,7 +7,7 @@ import { mapArrayToDictionary } from '../../../../../core/shared/array-utils'
 import type { DetectedLayoutSystem } from '../../../../../core/shared/element-template'
 import { SettableLayoutSystem } from '../../../../../core/shared/element-template'
 import type { PropertyPath } from '../../../../../core/shared/project-file-types'
-import { FunctionIcons, SquareButton } from '../../../../../uuiui'
+import { FunctionIcons, Icons, SquareButton } from '../../../../../uuiui'
 import {
   getSizeUpdateCommandsForNewPadding,
   pixelPaddingFromPadding,
@@ -385,6 +385,15 @@ export const PaddingControl = React.memo(() => {
 
   return (
     <SplitChainedNumberInput
+      labels={{
+        oneValue: <Icons.Padding color='on-highlight-secondary' />,
+        horizontal: <Icons.PaddingHorizontal color='on-highlight-secondary' />,
+        vertical: <Icons.PaddingVertical color='on-highlight-secondary' />,
+        top: <Icons.PaddingTop color='on-highlight-secondary' />,
+        left: <Icons.PaddingLeft color='on-highlight-secondary' />,
+        bottom: <Icons.PaddingBottom color='on-highlight-secondary' />,
+        right: <Icons.PaddingRight color='on-highlight-secondary' />,
+      }}
       tooltips={{
         oneValue: 'Padding',
         perDirection: 'Padding per direction',
diff --git a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
index 36df8590d16a..8e6a85ebf136 100644
--- a/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
+++ b/editor/src/components/inspector/sections/layout-section/layout-system-subsection/split-chained-number-input.tsx
@@ -106,13 +106,13 @@ export interface SplitChainedNumberInputProps<T> {
   mode: ControlMode | null
   onCycleMode: () => void
   labels?: {
-    top?: string
-    bottom?: string
-    left?: string
-    right?: string
-    horizontal?: string
-    vertical?: string
-    oneValue?: string
+    top?: React.ReactChild
+    bottom?: React.ReactChild
+    left?: React.ReactChild
+    right?: React.ReactChild
+    horizontal?: React.ReactChild
+    vertical?: React.ReactChild
+    oneValue?: React.ReactChild
   }
   tooltips?: {
     oneValue?: string
diff --git a/editor/src/components/inspector/sections/style-section/container-subsection/radius-row.tsx b/editor/src/components/inspector/sections/style-section/container-subsection/radius-row.tsx
index 0c1a930f469a..3714f2f805ab 100644
--- a/editor/src/components/inspector/sections/style-section/container-subsection/radius-row.tsx
+++ b/editor/src/components/inspector/sections/style-section/container-subsection/radius-row.tsx
@@ -37,6 +37,7 @@ import {
   longhandShorthandEventHandler,
   SplitChainedNumberInput,
 } from '../../layout-section/layout-system-subsection/split-chained-number-input'
+import { Icons } from '../../../../../uuiui/icons'
 
 export const RadiusRow = React.memo(() => {
   const { value: borderRadiusValue, onUnsetValues } = useInspectorStyleInfo('borderRadius')
@@ -232,7 +233,7 @@ export const BorderRadiusControl = React.memo(() => {
 
   const isCmdPressedRef = useRefEditorState((store) => store.editor.keysPressed.cmd === true)
 
-  const onCylceMode = React.useCallback(
+  const onCycleMode = React.useCallback(
     () => cycleToNextMode(initialMode, isCmdPressedRef.current === true ? 'backward' : 'forward'),
     [cycleToNextMode, initialMode, isCmdPressedRef],
   )
@@ -242,16 +243,17 @@ export const BorderRadiusControl = React.memo(() => {
   return (
     <SplitChainedNumberInput
       labels={{
-        top: '╭',
-        bottom: '╯',
-        left: '╰',
-        right: '╮',
+        top: <Icons.BorderRadiusTopLeft color='on-highlight-secondary' />,
+        bottom: <Icons.BorderRadiusBottomRight color='on-highlight-secondary' />,
+        left: <Icons.BorderRadiusBottomLeft color='on-highlight-secondary' />,
+        right: <Icons.BorderRadiusTopRight color='on-highlight-secondary' />,
+        oneValue: <Icons.BorderRadius color='on-highlight-secondary' />,
       }}
       tooltips={{
         oneValue: 'Radius',
         perSide: 'Radius per corner',
       }}
-      onCycleMode={onCylceMode}
+      onCycleMode={onCycleMode}
       numberType={'LengthPercent'}
       name='radius'
       mode={modeToUse}
diff --git a/editor/src/components/inspector/sections/style-section/text-subsection/text-subsection.tsx b/editor/src/components/inspector/sections/style-section/text-subsection/text-subsection.tsx
index 6cca2b939ee4..9abe995da948 100644
--- a/editor/src/components/inspector/sections/style-section/text-subsection/text-subsection.tsx
+++ b/editor/src/components/inspector/sections/style-section/text-subsection/text-subsection.tsx
@@ -414,7 +414,7 @@ export const TextSubsection = React.memo(() => {
               onSubmitValue={wrappedLetterSpacingOnSubmitValue}
               onTransientSubmitValue={wrappedLetterSpacingOnTransientSubmitValue}
               controlStatus={letterSpacingMetadata.controlStatus}
-              DEPRECATED_labelBelow='letter'
+              DEPRECATED_labelBelow=<Icons.LetterSpacing color='on-highlight-secondary' />
               stepSize={0.01}
               numberType='Length'
               defaultUnitToHide={'px'}
@@ -438,7 +438,7 @@ export const TextSubsection = React.memo(() => {
               controlStatus={lineHeightMetadata.controlStatus}
               onSubmitValue={wrappedLineHeightOnSubmitValue}
               onTransientSubmitValue={wrappedLineHeightOnTransientSubmitValue}
-              DEPRECATED_labelBelow='line'
+              DEPRECATED_labelBelow=<Icons.LineHeight color='on-highlight-secondary' />
               stepSize={0.01}
               numberType='Length'
               defaultUnitToHide={'em'}
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 16b4e9488594..13256ba225d4 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
@@ -365,6 +365,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -387,6 +392,13 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='padding-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -530,6 +542,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -553,6 +570,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -951,6 +975,11 @@ Array [
   "/UtopiaSpiedFunctionComponent(DropdownIndicator)/UtopiaSpiedFunctionComponent(DropdownIndicator)/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))",
   "/Symbol(react.forward_ref)(render)/UtopiaSpiedExoticType(Symbol(react.context))/Symbol(react.context)/div",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='radius-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -973,6 +1002,13 @@ Array [
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input)):data-testid='radius-one'",
   "/Symbol(react.memo)(Symbol(react.forward_ref)())/Symbol(react.forward_ref)()/Symbol(react.forward_ref)(Styled(input))/input:data-testid='radius-one'",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/div///Symbol(react.forward_ref)(Styled(div)):data-testid='padding-cycle-mode'",
   "/div///UtopiaSpiedClass(Tooltip)",
   "/div///Symbol(react.memo)()",
@@ -1066,6 +1102,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -1089,6 +1130,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -1311,6 +1359,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -1382,6 +1435,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -1830,6 +1890,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -1901,6 +1966,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -2301,6 +2373,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -2372,6 +2449,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
@@ -2714,6 +2798,11 @@ Array [
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedFunctionComponent(BooleanControl)",
   "/Symbol(react.forward_ref)(Styled(div))/div//UtopiaSpiedExoticType(Symbol(react.fragment))",
   "/Symbol(react.forward_ref)(EmotionCssPropInternal)/div/ChildPinControl/Symbol(react.memo)()",
@@ -2785,6 +2874,13 @@ Array [
   "//UtopiaSpiedExoticType(Symbol(react.fragment))//UtopiaSpiedFunctionComponent(InspectorContextMenuWrapper)",
   "/div/div/PropertyLabel/Symbol(react.forward_ref)(EmotionCssPropInternal)",
   "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
+  "/div/div//Symbol(react.memo)()",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/span",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(FlexRow)",
   "/StyleSection/UtopiaSpiedExoticType(Symbol(react.fragment))/TextSubsection/UtopiaSpiedFunctionComponent(RemovePropertyButton)",
diff --git a/editor/src/core/performance/performance-regression-tests.spec.tsx b/editor/src/core/performance/performance-regression-tests.spec.tsx
index 835583e939cb..0bc51a5d18ee 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(`773`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`797`)
     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(`993`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`1017`)
     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(`525`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`549`)
     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(`634`)
+    expect(renderCountAfter - renderCountBefore).toMatchInlineSnapshot(`658`)
     expect(renderResult.getRenderInfo()).toMatchSnapshot()
   })
 })
diff --git a/editor/src/uuiui/icons.tsx b/editor/src/uuiui/icons.tsx
index 2a99e8098dee..b50edc10e8ba 100644
--- a/editor/src/uuiui/icons.tsx
+++ b/editor/src/uuiui/icons.tsx
@@ -645,6 +645,139 @@ export const Icons = {
     width: 16,
     height: 16,
   }),
+  BorderRadius: makeIcon({
+    category: 'inspector-element',
+    type: 'borderRadius',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  BorderRadiusBottomLeft: makeIcon({
+    category: 'inspector-element',
+    type: 'borderRadius-bottomLeft',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  BorderRadiusBottomRight: makeIcon({
+    category: 'inspector-element',
+    type: 'borderRadius-bottomRight',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  BorderRadiusTopLeft: makeIcon({
+    category: 'inspector-element',
+    type: 'borderRadius-topLeft',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  BorderRadiusTopRight: makeIcon({
+    category: 'inspector-element',
+    type: 'borderRadius-topRight',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  Padding: makeIcon({
+    category: 'inspector-element',
+    type: 'padding',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  PaddingVertical: makeIcon({
+    category: 'inspector-element',
+    type: 'paddingVertical',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  PaddingHorizontal: makeIcon({
+    category: 'inspector-element',
+    type: 'paddingHorizontal',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  PaddingTop: makeIcon({
+    category: 'inspector-element',
+    type: 'paddingTop',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  PaddingBottom: makeIcon({
+    category: 'inspector-element',
+    type: 'paddingBottom',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  PaddingLeft: makeIcon({
+    category: 'inspector-element',
+    type: 'paddingLeft',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  PaddingRight: makeIcon({
+    category: 'inspector-element',
+    type: 'paddingRight',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  GapVertical: makeIcon({
+    category: 'inspector-element',
+    type: 'gapVertical',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  GapHorizontal: makeIcon({
+    category: 'inspector-element',
+    type: 'gapHorizontal',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  WrapRow: makeIcon({
+    category: 'inspector-element',
+    type: 'wrapRow',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  WrapColumn: makeIcon({
+    category: 'inspector-element',
+    type: 'wrapColumn',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  LetterSpacing: makeIcon({
+    category: 'inspector-element',
+    type: 'letterSpacing',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  LineHeight: makeIcon({
+    category: 'inspector-element',
+    type: 'lineHeight',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
+  StrikeThrough: makeIcon({
+    category: 'inspector-element',
+    type: 'strikethrough',
+    color: 'main',
+    width: 16,
+    height: 16,
+  }),
 } as const
 
 export const FunctionIcons = {