diff --git a/docs/app/views/examples/components/icon/_props.html.erb b/docs/app/views/examples/components/icon/_props.html.erb
index bc5185339f..61201212a4 100644
--- a/docs/app/views/examples/components/icon/_props.html.erb
+++ b/docs/app/views/examples/components/icon/_props.html.erb
@@ -36,7 +36,10 @@
<%= md('`icon`') %><%= sage_component SageBadge, { color: "published", value: "required" } %> |
- <%= md('Which icon to display. See Sage Icons under "Design."') %> |
+ <%= md('
+ Which icon to display. See Sage Icons under "Figma Design."
+ Note: `null` is also available to place an empty space icon
+ ') %> |
<%= md('`String` for desired icon.') %> |
<%= md('--') %> |
diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb
index 7b653f9bde..66aa761cc1 100644
--- a/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb
+++ b/docs/lib/sage_rails/app/sage_tokens/sage_tokens.rb
@@ -250,6 +250,7 @@ def SageTokens.grid_templates
"move-right",
"multi-pay",
"newsletter",
+ "null",
"one-off-session",
"one-time",
"package",
diff --git a/packages/sage-assets/lib/stylesheets/tokens/_icon.scss b/packages/sage-assets/lib/stylesheets/tokens/_icon.scss
index a1aaa3a268..fb468f34fd 100644
--- a/packages/sage-assets/lib/stylesheets/tokens/_icon.scss
+++ b/packages/sage-assets/lib/stylesheets/tokens/_icon.scss
@@ -191,6 +191,7 @@ $sage-icons: (
move-right: unicode(e99a),
multi-pay: unicode(e99b),
newsletter: unicode(e99c),
+ "null": "",
one-off-session: unicode(e99d),
one-time: unicode(e99e),
package: unicode(e99f),
diff --git a/packages/sage-react/lib/Icon/Icon.story.jsx b/packages/sage-react/lib/Icon/Icon.story.jsx
index bd84791929..fdadb634e0 100644
--- a/packages/sage-react/lib/Icon/Icon.story.jsx
+++ b/packages/sage-react/lib/Icon/Icon.story.jsx
@@ -59,3 +59,10 @@ CustomBackgroundSizeCircular.args = {
backgroundHeight: '48px',
size: Icon.SIZES.LG
};
+export const NullIcon = Template.bind({});
+NullIcon.args = {
+ cardColor: 'draft',
+ circular: true,
+ backgroundHeight: '48px',
+ icon: Icon.ICONS.NULL,
+};
diff --git a/packages/sage-react/lib/configs/tokens/icons.js b/packages/sage-react/lib/configs/tokens/icons.js
index 115c4fc353..2677e47838 100644
--- a/packages/sage-react/lib/configs/tokens/icons.js
+++ b/packages/sage-react/lib/configs/tokens/icons.js
@@ -151,6 +151,7 @@ export const TOKENS_ICONS = {
MOVE_RIGHT: 'move-right',
MULTI_PAY: 'multi-pay',
NEWSLETTER: 'newsletter',
+ NULL: 'null',
ONE_OFF_SESSION: 'one-off-session',
ONE_TIME: 'one-time',
PACKAGE: 'package',