diff --git a/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts b/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts
index fdc18aa97..8bcbb0f15 100644
--- a/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts
+++ b/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.css.ts
@@ -18,6 +18,11 @@ export const iconPicker = style({
   lineHeight: 1,
   color: cssVarV2.icon.primary,
 });
+
+export const iconContent = style({
+  display: 'contents',
+});
+
 globalStyle(`${iconPicker} span:has(svg)`, {
   lineHeight: 0,
 });
diff --git a/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.tsx b/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.tsx
index 6f0a9d31f..91f7ca230 100644
--- a/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.tsx
+++ b/packages/frontend/component/src/ui/icon-name-editor/icon-name-editor.tsx
@@ -85,6 +85,7 @@ export const IconEditor = ({
         data-icon-type={icon?.type}
         aria-label={icon ? 'Change Icon' : 'Select Icon'}
         title={icon ? 'Change Icon' : 'Select Icon'}
+        contentClassName={styles.iconContent}
       >
         <IconRenderer data={icon} fallback={iconPlaceholder} />
       </Button>
diff --git a/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-button.tsx b/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-button.tsx
index 6a93b8972..0080cd22c 100644
--- a/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-button.tsx
+++ b/packages/frontend/component/src/ui/icon-picker/picker/emoji/emoji-button.tsx
@@ -20,6 +20,7 @@ export const EmojiButton = memo(function EmojiButton({
       size={24}
       style={{ padding: 4 }}
       icon={<span>{emoji}</span>}
+      iconStyle={{ justifyContent: 'center' }}
       onClick={handleClick}
     />
   );