diff --git a/examples/example-ui-react/src/App.tsx b/examples/example-ui-react/src/App.tsx
index 16bfd6130..4f72ee3ba 100644
--- a/examples/example-ui-react/src/App.tsx
+++ b/examples/example-ui-react/src/App.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react'
-import '../../../tokens/css/variables.css'
-import LeoButton from '../../../react/button'
-import Tooltip from '../../../react/tooltip'
+import '@brave/leo/tokens/css/variables.css'
+import LeoButton from '@brave/leo/react/button'
+import Tooltip from '@brave/leo/react/tooltip'
+import Input from '@brave/leo/react/input'
+import Dropdown from '@brave/leo/react/dropdown'
+import ButtonMenu from '@brave/leo/react/buttonMenu'
+import Toggle from '@brave/leo/react/toggle'
+import Icon from '@brave/leo/react/icon'
 import styles from './App.module.css'
-import Input from '../../../react/input'
-import Dropdown from '../../../react/dropdown'
-import ButtonMenu from '../../../react/buttonMenu'
-import Toggle from '../../../react/toggle'
-import Icon from '../../../react/icon'
 
 function App() {
   // Verify that we can change props and children (slots)
diff --git a/examples/example-ui-react/tsconfig.json b/examples/example-ui-react/tsconfig.json
index 748d1a9c7..9b2682503 100644
--- a/examples/example-ui-react/tsconfig.json
+++ b/examples/example-ui-react/tsconfig.json
@@ -17,7 +17,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "experimentalDecorators": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@brave/leo/*": ["../../*"]
+    }
   },
   "include": ["src"]
 }
diff --git a/examples/example-ui-react/webpack.config.js b/examples/example-ui-react/webpack.config.js
index 7ca276ba9..355a0e441 100644
--- a/examples/example-ui-react/webpack.config.js
+++ b/examples/example-ui-react/webpack.config.js
@@ -92,8 +92,9 @@ module.exports = function (argv) {
       alias: {
         svelte: path.resolve('node_modules', 'svelte'),
         react: path.resolve('node_modules', 'react'),
-        ['react-dom']: path.resolve('node_modules', 'react-dom'),
-        ['react-router']: path.resolve('node_modules', 'react-router')
+        'react-dom': path.resolve('node_modules', 'react-dom'),
+        'react-router': path.resolve('node_modules', 'react-router'),
+        '@brave/leo': path.resolve(__dirname, '../../')
       }
     }
   }
diff --git a/src/components/icon/icon.svelte b/src/components/icon/icon.svelte
index 20c3a975c..a7cfdb283 100644
--- a/src/components/icon/icon.svelte
+++ b/src/components/icon/icon.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <script lang="ts">
-  import type { IconName } from '../../../icons/meta'
+  import type { IconName } from '@brave/leo/icons/meta'
   export let name: IconName = undefined
   export let forceColor: boolean = false
   export let title: string = undefined
diff --git a/tsconfig.json b/tsconfig.json
index ae03c9d29..0e8b94d4f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,6 +4,11 @@
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
   "compilerOptions": {
     "strictNullChecks": false,
-    "noImplicitAny": false
+    "noImplicitAny": false,
+    "paths": {
+      // Sometimes we want to preserve @brave/leo for complex paths when providing
+      // typescript types for the consumer.
+      "@brave/leo/*": ["./*"]
+    }
   }
 }