diff --git a/package.json b/package.json
index 5c2dbdbc..acffd790 100644
--- a/package.json
+++ b/package.json
@@ -13,14 +13,16 @@
     "typescript": "^3.6.3"
   },
   "scripts": {
-    "build": "polkadot-dev-build-ts && polkadot-dev-build-docs",
+    "build": "yarn build:ts && yarn build:docs",
+    "build:docs": "polkadot-dev-build-docs",
+    "build:ts": "polkadot-dev-build-ts",
     "check": "yarn lint",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx . && tsc --noEmit --pretty",
     "clean": "polkadot-dev-clean-build",
-    "demo:identicon:react": "webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080",
-    "demo:identicon:vue": "webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080",
-    "example:react": "cd packages/example-react && webpack --config webpack.config.js",
-    "example:vue": "cd packages/example-vue && webpack --config webpack.config.js",
+    "demo:identicon:react": "yarn build:ts && webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080",
+    "demo:identicon:vue": "yarn build:ts && webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080",
+    "example:react": "yarn build:ts && cd packages/example-react && webpack --config webpack.config.js",
+    "example:vue": "yarn build:ts && cd packages/example-vue && webpack --config webpack.config.js",
     "postinstall": "polkadot-dev-yarn-only",
     "test": "jest --coverage --runInBand",
     "test:one": "jest"
diff --git a/packages/example-react/webpack.config.js b/packages/example-react/webpack.config.js
index 8f645d96..59db7898 100644
--- a/packages/example-react/webpack.config.js
+++ b/packages/example-react/webpack.config.js
@@ -19,10 +19,10 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@polkadot/react-identicon': path.resolve(__dirname, '../react-identicon/src'),
-      '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/src'),
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/src'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/src')
+      '@polkadot/react-identicon': path.resolve(__dirname, '../react-identicon/build'),
+      '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
+      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
     },
     extensions: ['.js', '.ts', '.tsx']
   },
diff --git a/packages/example-vue/webpack.config.js b/packages/example-vue/webpack.config.js
index a2d13f45..090a3d98 100644
--- a/packages/example-vue/webpack.config.js
+++ b/packages/example-vue/webpack.config.js
@@ -21,10 +21,10 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/src'),
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/src'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/src'),
-      '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/src')
+      '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
+      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
+      '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build')
     },
     extensions: ['.js', '.ts', '.tsx']
   },
diff --git a/packages/react-identicon/src/Demo.tsx b/packages/react-identicon/src/Demo.tsx
index ca4d7bad..0dce232a 100644
--- a/packages/react-identicon/src/Demo.tsx
+++ b/packages/react-identicon/src/Demo.tsx
@@ -8,6 +8,8 @@ import { encodeAddress, randomAsU8a } from '@polkadot/util-crypto';
 
 import IdentityIcon from '.';
 
+const THEMES = ['beachball', 'polkadot', 'substrate'];
+
 export default class Demo extends React.PureComponent {
   public render (): React.ReactNode {
     const identities: string[] = [];
@@ -18,10 +20,10 @@ export default class Demo extends React.PureComponent {
       );
     }
 
-    return identities.map((value): React.ReactNode => (
+    return identities.map((value, index): React.ReactNode => (
       <IdentityIcon
         key={value.toString()}
-        theme='jdenticon'
+        theme={THEMES[index % THEMES.length] as 'empty'}
         value={value}
       />
     ));
diff --git a/packages/react-identicon/webpack.config.js b/packages/react-identicon/webpack.config.js
index fd5bf4a5..a405c08e 100644
--- a/packages/react-identicon/webpack.config.js
+++ b/packages/react-identicon/webpack.config.js
@@ -19,7 +19,8 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/src')
+      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   },
diff --git a/packages/vue-identicon/webpack.config.js b/packages/vue-identicon/webpack.config.js
index 477d2edb..ec82c60c 100644
--- a/packages/vue-identicon/webpack.config.js
+++ b/packages/vue-identicon/webpack.config.js
@@ -20,7 +20,7 @@ module.exports = {
   },
   resolve: {
     alias: {
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/src')
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
     },
     extensions: ['.js', '.ts']
   },