diff --git a/packages/output-components-as-svg/index.js b/packages/output-components-as-svg/index.js
index 83c01977..842fd354 100644
--- a/packages/output-components-as-svg/index.js
+++ b/packages/output-components-as-svg/index.js
@@ -4,8 +4,8 @@ const makeDir = require('make-dir');
 
 module.exports = ({
     output,
-    getDirname = (options) => options.dirname,
-    getBasename = (options) => `${options.pageName}-${options.basename}.svg`,
+    getDirname = (options) => `${options.pageName}${path.sep}${options.dirname}`,
+    getBasename = (options) => `${options.basename}.svg`,
 }) => {
     return async (pages) => {
         pages.forEach(({ name: pageName, components }) => {
diff --git a/packages/output-components-as-svg/index.test.js b/packages/output-components-as-svg/index.test.js
index 5f0a5871..660fb5d1 100644
--- a/packages/output-components-as-svg/index.test.js
+++ b/packages/output-components-as-svg/index.test.js
@@ -24,8 +24,8 @@ describe('outputter as svg', () => {
         })(pages);
 
         expect(writeFileSync).to.be.calledTwice;
-        expect(writeFileSync.firstCall).to.be.calledWithMatch('output/page1-Figma-Logo.svg');
-        expect(writeFileSync.secondCall).to.be.calledWithMatch('output/page1-Search.svg');
+        expect(writeFileSync.firstCall).to.be.calledWithMatch('output/page1/Figma-Logo.svg');
+        expect(writeFileSync.secondCall).to.be.calledWithMatch('output/page1/Search.svg');
     });
 
     it('should create folder if component names contain slashes', async () => {
@@ -38,7 +38,7 @@ describe('outputter as svg', () => {
         })(pages);
 
         expect(writeFileSync).to.be.calledOnce;
-        expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/fakePage-eye.svg');
+        expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/eye.svg');
     });
 
     describe('options', () => {
@@ -50,11 +50,11 @@ describe('outputter as svg', () => {
 
             await outputter({
                 output: 'output',
-                getBasename: (options) => `${options.basename}.svg`,
+                getBasename: (options) => `${options.pageName}-${options.basename}.svg`,
             })(pages);
 
             expect(writeFileSync).to.be.calledOnce;
-            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/eye.svg');
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/fakePage-eye.svg');
         });
 
         it('should be able to customize "dirname"', async () => {
@@ -62,12 +62,12 @@ describe('outputter as svg', () => {
 
             await outputter({
                 output: 'output',
-                getBasename: (options) => `${options.basename}.svg`,
-                getDirname: (options) => `${options.pageName}/${options.dirname}`,
+                getBasename: (options) => `${options.pageName}-${options.basename}.svg`,
+                getDirname: (options) => `${options.dirname}`,
             })(pages);
 
             expect(writeFileSync).to.be.calledOnce;
-            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/fakePage/icon/eye.svg');
+            expect(writeFileSync.firstCall).to.be.calledWithMatch('output/icon/fakePage-eye.svg');
         });
     });
 });
diff --git a/packages/output-components-as-svgstore/README.md b/packages/output-components-as-svgstore/README.md
index 1d324155..49621def 100644
--- a/packages/output-components-as-svgstore/README.md
+++ b/packages/output-components-as-svgstore/README.md
@@ -10,7 +10,8 @@ This is a sample of the output:
 $ tree output/
 # output/
 # ├── icons.svg
-# └── monochrome.svg
+# ├── monochrome.svg
+# └── unit-test.svg
 ```
 
 Probably you already know what <a target="_blank" rel="noopener noreferrer" href="https://css-tricks.com/css-sprites/">CSS Sprites</a> are, basically you can combine multiple images into a single image file and use it on a website.
diff --git a/packages/output-components-as-svgstore/index.js b/packages/output-components-as-svgstore/index.js
index 46b70b15..e16e1dee 100644
--- a/packages/output-components-as-svgstore/index.js
+++ b/packages/output-components-as-svgstore/index.js
@@ -14,7 +14,7 @@ module.exports = ({
             const sprites = svgstore(options);
 
             components.forEach(({ name: componentName, svg }) => {
-                sprites.add(`${iconPrefix}${pageName}-${componentName}`, svg);
+                sprites.add(`${iconPrefix}${pageName}/${componentName}`, svg);
             });
 
             const filePath = path.resolve(output, `${pageName}.svg`);
diff --git a/packages/website/.figmaexportrc.js b/packages/website/.figmaexportrc.js
index 45a954e2..42569fc4 100644
--- a/packages/website/.figmaexportrc.js
+++ b/packages/website/.figmaexportrc.js
@@ -36,7 +36,7 @@ module.exports = {
 
                 require('../output-components-as-svgstore')({
                     output: './output/svgstore-monochrome',
-                    iconPrefix: 'unfilled-',
+                    iconPrefix: '[unfilled] ',
                     options: {
                         cleanSymbols: ['fill']
                     }
diff --git a/packages/website/src/output-components/ComponentsAsSvgstore_default.js b/packages/website/src/output-components/ComponentsAsSvgstore_default.js
index 94842f05..125d5a6a 100644
--- a/packages/website/src/output-components/ComponentsAsSvgstore_default.js
+++ b/packages/website/src/output-components/ComponentsAsSvgstore_default.js
@@ -41,12 +41,12 @@ const SvgAsSvgstoreComponent = () => (
         <Fragment>
             <div className="svgstore" dangerouslySetInnerHTML={{ __html: figmaMonochrome }} />
             <div className="svgstore" dangerouslySetInnerHTML={{ __html: figmaIcons }} />
-            <svg className="icon"><use href="#icons-figma-export" /></svg>
-            <svg className="icon"><use href="#icons-figma-logo" /></svg>
-            <svg className="icon"><use href="#monochrome-figma-red" /></svg>
-            <svg className="icon"><use href="#monochrome-figma-purple" /></svg>
-            <svg className="icon"><use href="#monochrome-figma-blue" /></svg>
-            <svg className="icon"><use href="#monochrome-figma-green" /></svg>
+            <svg className="icon"><use href="#icons/figma-export" /></svg>
+            <svg className="icon"><use href="#icons/figma-logo" /></svg>
+            <svg className="icon"><use href="#monochrome/figma-red" /></svg>
+            <svg className="icon"><use href="#monochrome/figma-purple" /></svg>
+            <svg className="icon"><use href="#monochrome/figma-blue" /></svg>
+            <svg className="icon"><use href="#monochrome/figma-green" /></svg>
         </Fragment>
     </CodeBlock>
 );
diff --git a/packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js b/packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js
index 107d955c..e657e765 100644
--- a/packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js
+++ b/packages/website/src/output-components/ComponentsAsSvgstore_monochrome.js
@@ -41,8 +41,8 @@ const SvgAsSvgstoreMonochromeComponent = () => (
     <CodeBlock {...props}>
         <Fragment>
             <div className="svgstore" dangerouslySetInnerHTML={{ __html: figmaIcons }} />
-            <svg className="icon"><use href="#unfilled-icons-figma-export" /></svg>
-            <svg className="icon"><use href="#unfilled-icons-figma-logo" /></svg>
+            <svg className="icon"><use href="#[unfilled] icons/figma-export" /></svg>
+            <svg className="icon"><use href="#[unfilled] icons/figma-logo" /></svg>
         </Fragment>
     </CodeBlock>
 );