diff --git a/packages/design-system/atoms/button/Button.styled.ts b/packages/design-system/atoms/button/Button.styled.ts
index 49819ea..4a7a5fa 100644
--- a/packages/design-system/atoms/button/Button.styled.ts
+++ b/packages/design-system/atoms/button/Button.styled.ts
@@ -3,9 +3,18 @@ import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
import { text300, text400 } from '@roleypoly/design-system/atoms/typography';
import styled, { css } from 'styled-components';
-export const IconContainer = styled.div`
+export const IconContainer = styled.div<{ small?: boolean }>`
margin-right: 0.6rem;
font-size: 1.75em;
+
+ ${(props) =>
+ props.small &&
+ css`
+ margin-right: 0.2rem;
+ font-size: 1.25em;
+ position: relative;
+ top: 2px;
+ `}
`;
const base = css`
diff --git a/packages/design-system/atoms/button/Button.tsx b/packages/design-system/atoms/button/Button.tsx
index e48d1c9..3afc06a 100644
--- a/packages/design-system/atoms/button/Button.tsx
+++ b/packages/design-system/atoms/button/Button.tsx
@@ -31,7 +31,9 @@ export const Button = (props: ButtonProps) => {
onClick={props.onClick}
disabled={props.disabled}
>
- {props.icon &&