diff --git a/.storybook/main.js b/.storybook/main.js
index f4f05dbe48..ba58ef97ba 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const webpack = require('webpack');
 
 const config = {
   core: {
@@ -51,6 +52,8 @@ const config = {
       path.resolve(__dirname, '../src/openforms/js'),
     ];
 
+    config.plugins.push(new webpack.DefinePlugin({STATIC_URL: JSON.stringify('./static/')}));
+
     if (isEnvProduction) {
       config.plugins.push(new MiniCssExtractPlugin({filename: 'static/bundles/[name].css'}));
     }
diff --git a/src/openforms/js/components/admin/BooleanIcons.mdx b/src/openforms/js/components/admin/BooleanIcons.mdx
new file mode 100644
index 0000000000..d76c9fb878
--- /dev/null
+++ b/src/openforms/js/components/admin/BooleanIcons.mdx
@@ -0,0 +1,16 @@
+import {ArgTypes, Canvas, Meta} from '@storybook/addon-docs';
+
+import * as BooleanIconsStories from './BooleanIcons.stories';
+
+<Meta of={BooleanIconsStories} />
+
+# Boolean icons
+
+You can use boolean icons to quickly represent the state of a boolean. Booleans are tri-state:
+`true`, `false` or `null`.
+
+<Canvas of={BooleanIconsStories.Yes} />
+
+<Canvas of={BooleanIconsStories.No} />
+
+<Canvas of={BooleanIconsStories.Unknown} />
diff --git a/src/openforms/js/components/admin/BooleanIcons.stories.js b/src/openforms/js/components/admin/BooleanIcons.stories.js
new file mode 100644
index 0000000000..52a9f95360
--- /dev/null
+++ b/src/openforms/js/components/admin/BooleanIcons.stories.js
@@ -0,0 +1,18 @@
+import BooleanIcon, {IconNo, IconUnknown, IconYes} from './BooleanIcons';
+
+export default {
+  title: 'Admin / Django / BooleanIcons',
+  component: BooleanIcon,
+};
+
+export const Yes = {
+  render: () => <IconYes />,
+};
+
+export const No = {
+  render: () => <IconNo />,
+};
+
+export const Unknown = {
+  render: () => <IconUnknown />,
+};