diff --git a/webapp/src/components/cardDetail/cardDetail.tsx b/webapp/src/components/cardDetail/cardDetail.tsx
index c3d818795..8355edb71 100644
--- a/webapp/src/components/cardDetail/cardDetail.tsx
+++ b/webapp/src/components/cardDetail/cardDetail.tsx
@@ -13,7 +13,7 @@ import mutator from '../../mutator'
 import Button from '../../widgets/buttons/button'
 import {Focusable} from '../../widgets/editable'
 import EditableArea from '../../widgets/editableArea'
-import EmojiIcon from '../../widgets/icons/emoji'
+import CompassIcon from '../../widgets/icons/compassIcon'
 import TelemetryClient, {TelemetryActions, TelemetryCategory} from '../../telemetry/telemetryClient'
 
 import BlockIconSelector from '../blockIconSelector'
@@ -113,8 +113,14 @@ const CardDetail = (props: Props): JSX.Element|null => {
                 {!props.readonly && canEditBoardCards && !card.fields.icon &&
                     <div className='add-buttons'>
                         <Button
+                            emphasis='default'
+                            size='small'
                             onClick={setRandomIcon}
-                            icon={<EmojiIcon/>}
+                            icon={
+                                <CompassIcon
+                                    icon='emoticon-outline'
+                                />}
+
                         >
                             <FormattedMessage
                                 id='CardDetail.add-icon'