diff --git a/web/components/enum-settings-option.css b/web/components/enum-settings-option.css
--- a/web/components/enum-settings-option.css
+++ b/web/components/enum-settings-option.css
@@ -1,6 +1,6 @@
 div.optionContainer {
   display: flex;
-  padding: 16px 32px 16px 16px;
+  padding: 16px;
   align-items: center;
   border-radius: 8px;
   cursor: pointer;
@@ -11,7 +11,7 @@
 }
 
 div.optionIcon {
-  margin-right: 24px;
+  margin-right: 16px;
 }
 
 div.optionIconTop {
diff --git a/web/components/enum-settings-option.react.js b/web/components/enum-settings-option.react.js
--- a/web/components/enum-settings-option.react.js
+++ b/web/components/enum-settings-option.react.js
@@ -21,7 +21,7 @@
   +selected: boolean,
   +onSelect: () => void,
   +disabled?: boolean,
-  +icon: React.Node,
+  +icon?: React.Node,
   +title: string,
   +type?: InputType,
   +iconPosition?: IconPosition,
@@ -81,12 +81,20 @@
     iconPositionClassnames[iconPosition],
   );
 
+  const optionIcon = React.useMemo(() => {
+    if (!icon) {
+      return null;
+    }
+
+    return <div className={optionIconClasses}>{icon}</div>;
+  }, [icon, optionIconClasses]);
+
   return (
     <div
       className={optionContainerClasses}
       onClick={disabled ? null : onSelect}
     >
-      <div className={optionIconClasses}>{icon}</div>
+      {optionIcon}
       <div className={css.optionContent}>
         <div className={css.optionTitle}>{title}</div>
         <div className={css.optionDescription}>{descriptionItems}</div>