diff --git a/icon-finder-light.png b/icon-finder-light.png
new file mode 100644
index 0000000..12a001c
Binary files /dev/null and b/icon-finder-light.png differ
diff --git a/icon-finder.png b/icon-finder.png
new file mode 100644
index 0000000..32633c0
Binary files /dev/null and b/icon-finder.png differ
diff --git a/icon-finder2.png b/icon-finder2.png
new file mode 100644
index 0000000..76a7fbc
Binary files /dev/null and b/icon-finder2.png differ
diff --git a/package.json b/package.json
index 9b3af1c..f159d92 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iconexplorer.app",
-  "version": "0.0.1",
+  "version": "2.0.0",
   "description": "Searchable Quasar SVG icons",
   "productName": "Quasar Framework SVG icons",
   "author": "Jeff Galbraith <galbraith64@gmail.com>",
diff --git a/public/favicon.ico b/public/favicon.ico
index ae7bbdb..47d0eac 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/icon-finder-light.png b/public/icon-finder-light.png
new file mode 100644
index 0000000..12a001c
Binary files /dev/null and b/public/icon-finder-light.png differ
diff --git a/public/icons/favicon-128x128.png b/public/icons/favicon-128x128.png
index 1401176..0414a7d 100644
Binary files a/public/icons/favicon-128x128.png and b/public/icons/favicon-128x128.png differ
diff --git a/public/icons/favicon-16x16.png b/public/icons/favicon-16x16.png
index 679063a..81394c9 100644
Binary files a/public/icons/favicon-16x16.png and b/public/icons/favicon-16x16.png differ
diff --git a/public/icons/favicon-32x32.png b/public/icons/favicon-32x32.png
index fd1fbc6..9a03a21 100644
Binary files a/public/icons/favicon-32x32.png and b/public/icons/favicon-32x32.png differ
diff --git a/public/icons/favicon-96x96.png b/public/icons/favicon-96x96.png
index e93b80a..c91ebb1 100644
Binary files a/public/icons/favicon-96x96.png and b/public/icons/favicon-96x96.png differ
diff --git a/quasar.conf.js b/quasar.conf.js
index a690734..b1012a5 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -116,7 +116,8 @@ module.exports = configure(function (ctx) {
       plugins: [
         'Dark',
         'LoadingBar',
-        'Notify'
+        'Notify',
+        'Loading'
       ]
     },
 
diff --git a/src/App.vue b/src/App.vue
index 38442ee..125d355 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,8 +4,13 @@
 
 <script>
 import { defineComponent } from 'vue'
+import { provideStore } from 'assets/store.js'
 
 export default defineComponent({
-  name: 'App'
+  name: 'App',
+
+  setup () {
+    provideStore()
+  }
 })
 </script>
diff --git a/src/assets/profile.png b/src/assets/profile.png
new file mode 100644
index 0000000..87e1385
Binary files /dev/null and b/src/assets/profile.png differ
diff --git a/src/assets/store.js b/src/assets/store.js
new file mode 100644
index 0000000..855ca95
--- /dev/null
+++ b/src/assets/store.js
@@ -0,0 +1,120 @@
+import { inject, provide, reactive, computed } from 'vue'
+import { storeKey } from './symbols.js'
+
+export function useStore () {
+  return inject(storeKey)
+}
+
+export function provideStore () {
+  const makeReactive = process.env.SERVER !== true ? reactive : val => val
+  const store = makeReactive({
+    importedIcons: null,
+    filter: '',
+    iconSet: null,
+    iconSize: '128px',
+    cart: {},
+    leftDrawerOpen: false,
+    rightDrawerOpen: false,
+    showIconDialog: false
+  })
+
+  /*
+    cart looks like this:
+    {
+      packageName: {
+        iconSet: {
+          iconName: path,
+          ...
+        },
+        ...
+      }
+    }
+  */
+
+  store.addItem = function (packageName, iconSet, name, path) {
+    const item = store.findItem(packageName, iconSet, name)
+    if (!item) {
+      if (!store.cart[ packageName ]) store.cart[ packageName ] = {}
+      if (!store.cart[ packageName ][ iconSet ]) store.cart[ packageName ][ iconSet ] = {}
+      store.cart[ packageName ][ iconSet ][ name ] = path
+
+      return true
+    }
+    return false
+  }
+
+  store.removeItem = function (packageName, iconSet, name) {
+    if (store.cart[ packageName ]) {
+      if (store.cart[ packageName ][ iconSet ]) {
+        if (store.cart[ packageName ][ iconSet ][ name ]) {
+          delete store.cart[ packageName ][ iconSet ][ name ]
+          // should parents be removed?
+          if (Object.keys(store.cart[ packageName ][ iconSet ]).length === 0) {
+            delete store.cart[ packageName ][ iconSet ]
+            if (Object.keys(store.cart[ packageName ]).length === 0) {
+              delete store.cart[ packageName ]
+            }
+          }
+          return true
+        }
+      }
+    }
+    return false
+  }
+
+  store.removeAll = function () {
+    const keys = Object.keys(store.cart)
+    for (let index = 0; index < keys.length; ++index) {
+      delete store.cart[ keys[ index ] ]
+    }
+  }
+
+  // returns store item or null
+  store.findItem = function (packageName, iconSet, name) {
+    if (store.cart[ packageName ]) {
+      if (store.cart[ packageName ][ iconSet ]) {
+        if (store.cart[ packageName ][ iconSet ][ name ]) {
+          return store.cart[ packageName ][ iconSet ][ name ]
+        }
+      }
+    }
+
+    return null // not found
+  }
+
+  // When not SSR, this becomes reactive (when injected into store)
+  // but, on server, it's not reactive and need '.value' when accessing it
+  // should not be a problem because adding/removing from the cart is user initiated
+  store.selectedIconsFlattened = computed(() => {
+    const icons = [];
+    for (const packageName in store.cart) {
+      for (const iconSet in store.cart[ packageName ]) {
+        for (const iconName in store.cart[ packageName ][ iconSet ]) {
+          const path = store.cart[ packageName ][ iconSet ][ iconName ]
+          icons.push({
+            packageName,
+            iconSet,
+            iconName,
+            path
+          })
+        }
+      }
+    }
+
+    return icons
+  })
+
+  store.isCartIcon = function (name) {
+    for (let index = 0; index < store.selectedIconsFlattened.length; ++index) {
+      if (store.selectedIconsFlattened[ index ].iconName === name) {
+        return true
+      }
+    }
+    return false
+  }
+
+  provide(
+    storeKey,
+    store
+  )
+}
diff --git a/src/assets/symbols.js b/src/assets/symbols.js
new file mode 100644
index 0000000..967854c
--- /dev/null
+++ b/src/assets/symbols.js
@@ -0,0 +1,6 @@
+const hasSymbol = typeof Symbol === 'function'
+  && typeof Symbol.toStringTag === 'symbol'
+
+export const storeKey = hasSymbol === true
+  ? Symbol('_store_')
+  : '_store_'
diff --git a/src/components/SvgIconViewer.vue b/src/components/SvgIconViewer.vue
new file mode 100644
index 0000000..65b9f60
--- /dev/null
+++ b/src/components/SvgIconViewer.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="row justify-center">
+    <q-intersection
+      v-for="(path, name) in icons"
+      :key="name"
+      once
+      class="intersetion-icon-box col-xl-1 col-lg-2 col-md-3 col-sm-4 col-xs-6"
+      @click="onClick({ path, name })"
+    >
+      <div
+        class="intersetion-icon-box--inner row full-width justify-center items-center overflow-hidden ellipsis"
+        :class="{
+          'active-icon': isActiveIcon(name),
+          'cart-icon': store.isCartIcon(name)
+        }"
+      >
+        <q-icon
+          :name="path"
+          size="60px"
+          class="q-pa-xs row full-width justify-center items-center"
+        />
+        <div
+          class="row full-width justify-center items-center ellipsis"
+          style="font-size: 10px;"
+        >
+          {{ name }}
+        </div>
+        <q-tooltip
+          :delay="250"
+          class="primary"
+          style="font-size: 24px;"
+        >
+          {{ name }}
+        </q-tooltip>
+      </div>
+    </q-intersection>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { useStore } from 'assets/store.js'
+
+export default defineComponent({
+  name: 'SvgIconViewer',
+
+  props: {
+    icons: {
+      type: Object,
+      required: true
+    },
+    selectedName: {
+      type: String,
+      required: true
+    }
+  },
+
+  emits: [
+    'selected'
+  ],
+
+  setup (props, { emit }) {
+    const store = useStore()
+
+    return {
+      store,
+       onClick: function ({ path, name }) {
+        emit('selected', { path, name })
+      },
+      isActiveIcon: function (name) {
+        return props.selectedName === name
+      }
+    }
+  }
+})
+</script>
+
+<style lang="sass">
+.active-icon
+  color: rgba(25, 118, 210, 0.65)
+
+.cart-icon
+  color: rgba(255, 0, 0, 0.65)
+</style>
\ No newline at end of file
diff --git a/src/css/app.sass b/src/css/app.sass
index cdd2286..0284adc 100644
--- a/src/css/app.sass
+++ b/src/css/app.sass
@@ -1,5 +1,8 @@
 // app global css in Sass form
 
+.font-mono
+  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
+
 .intersetion-icon-box
   padding: 2px
   width: 100%
diff --git a/src/index.template.html b/src/index.template.html
index 026f21e..d82eecc 100644
--- a/src/index.template.html
+++ b/src/index.template.html
@@ -24,9 +24,9 @@
     <meta name="title" content="Quasar SVG Icon Explorer - Explorer Quasar Framework SVG icons" data-qmeta="title">
     <meta property="og:title" content="Quasar SVG Icon Explorer - Explorer Quasar Framework SVG icons" data-qmeta="ogTitle">
     <meta name="twitter:title" content="Quasar SVG Icon Explorer - Explorer Quasar Framework SVG icons" data-qmeta="twitterTitle">
-    <meta name="description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, see what they look like with different foreground and background colors." data-qmeta="description">
-    <meta property="og:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, see what they look like with different foreground and background colors." data-qmeta="ogDesc">
-    <meta name="twitter:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, see what they look like with different foreground and background colors." data-qmeta="twitterDesc">
+    <meta name="description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, copy imports and inlined to the clipboard, plus more to come." data-qmeta="description">
+    <meta property="og:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, copy imports and inlined to the clipboard, plus more to come." data-qmeta="ogDesc">
+    <meta name="twitter:description" content="An all-in-one location to search for SVG icons, copy selected icons to the clipboard, copy imports and inlined to the clipboard, plus more to come." data-qmeta="twitterDesc">
 
   </head>
   <body>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index fd23b05..cea7969 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr fFf">
+  <q-layout view="hHh LpR fFf">
     <q-header
       elevated
       class="glass"
@@ -11,12 +11,24 @@
           round
           :icon="mdiMenu"
           aria-label="Menu"
-          @click="leftDrawerOpen = !leftDrawerOpen"
+          @click="toggleLeftDrawer"
         />
 
         <q-toolbar-title>
-          <div>@Quasar/Extras <span class="text-subtitle2">&nbsp;v{{ version }}</span></div>
-          <div>Quasar Extras SVG Icons<span class="text-subtitle2">&nbsp;v{{ version2 }}</span></div>
+          <div>
+            <q-img
+              src="icon-finder-light.png"
+              width="42px"
+              height="42px"
+            />
+            Icon Explorer&nbsp;
+            <span
+              class="text-caption text-weight-bold"
+              style="font-size: 14px;"
+            >
+              v{{ appVersion }}
+            </span>
+          </div>
         </q-toolbar-title>
 
         <q-btn
@@ -26,25 +38,151 @@
           @click="$q.dark.toggle()"
         />
         <div>Quasar v{{ $q.version }}</div>
+        <q-btn
+          flat
+          round
+          :icon="Object.keys(store.cart).length === 0 ? mdiCartOutline : mdiCartHeart"
+          @click="toggleRightDrawer"
+        />
       </q-toolbar>
     </q-header>
 
+    <q-footer
+      elevated
+      class="glass q-ma-none"
+    >
+      <div class="markdown-page__footer--icons full-width row justify-center items-center q-gutter-sm">
+        <a
+          href="https://github.com/hawkeye64"
+          target="_blank"
+          rel="noopener"
+        ><q-avatar size="28px"><img src="~assets/profile.png"></q-avatar></a>
+        <a
+          href="https://github.com/hawkeye64/iconexplorer.app"
+          target="_blank"
+          rel="noopener"
+        ><q-icon :name="fabGithub" /></a>
+        <a
+          href="https://twitter.com/jgalbraith64"
+          target="_blank"
+          rel="noopener"
+        ><q-icon :name="fabTwitter" /></a>
+        <a
+          href="https://github.com/sponsors/hawkeye64"
+          target="_blank"
+          rel="noopener"
+        ><q-icon :name="mdiCharity" /></a>
+      </div>
+      <div class="full-width row justify-center items-center q-my-sm">
+        <p class="markdown-copyright">CC-BY / MIT License | Copyright &copy; {{ year }} Jeff Galbraith</p>
+      </div>
+    </q-footer>
+
+    <q-drawer
+      v-model="store.leftDrawerOpen"
+      show-if-above
+      bordered
+    >
+      <q-scroll-area class="fit">
+        <q-list dense>
+          <template
+            v-for="(parent, index) in iconSets"
+            :key="parent.label"
+          >
+            <q-item-label
+              header
+              class="text-caption text-weight-bold"
+              style="font-size: 14px;"
+            >
+              {{ parent.label }} v{{ index === 0 ? version : version2 }}
+            </q-item-label>
+            <q-item
+              v-for="child in parent.children"
+              :key="child.label"
+              v-ripple
+              :active="isActive(child)"
+              clickable
+              @click="onClickIconSet(child)"
+            >
+              <q-item-section>
+                <q-item-label class="q-ml-lg">» {{ child.label }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
+      </q-scroll-area>
+    </q-drawer>
+
     <q-drawer
-      v-model="leftDrawerOpen"
+      v-model="store.rightDrawerOpen"
       bordered
+      overlay
+      side="right"
     >
-      <q-list>
-        <q-item-label
-          header
+      <q-scroll-area class="fit">
+        <div
+          v-if="Object.keys(store.cart).length === 0"
+          class="row justify-center q-ma-lg"
         >
-          Essential Links
-        </q-item-label>
-        <EssentialLink
-          v-for="link in essentialLinks"
-          :key="link.title"
-          v-bind="link"
-        />
-      </q-list>
+          The library is empty!
+        </div>
+        <q-list
+          v-else
+          dense
+        >
+          <q-item
+            key="onCartRemoveAll"
+          >
+            <q-item-section>
+              Remove all library items
+            </q-item-section>
+            <q-item-section avatar>
+              <q-btn
+                :icon="mdiTrashCanOutline"
+                flat
+                round
+                @click="onCartRemoveAllItems"
+              />
+            </q-item-section>
+          </q-item>
+
+          <q-separator />
+
+          <q-item
+            key="onImportAll"
+            class="q-mt-xs"
+          >
+            <q-item-section>
+              <q-btn
+                label="Imported"
+                no-caps
+                @click="onImportAll"
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-btn
+                label="Inlined"
+                no-caps
+                @click="onInlinedAll"
+              />
+            </q-item-section>
+          </q-item>
+          <div>
+            <q-btn
+              v-for="icon in store.selectedIconsFlattened"
+              :key="icon.iconName"
+              :icon="icon.path"
+              round
+              flat
+              @click="importToClipboard(icon)"
+            >
+              <q-tooltip>
+                {{ 'import { ' + icon.iconName + ' } from ' + '\'' + icon.packageName + '/' + icon.iconSet + '\'' }}
+              </q-tooltip>
+            </q-btn>
+          </div>
+        </q-list>
+      </q-scroll-area>
     </q-drawer>
 
     <q-page-container>
@@ -54,92 +192,180 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
-import EssentialLink from 'components/EssentialLink.vue'
+import { defineComponent, computed } from 'vue'
+import { useQuasar, copyToClipboard } from 'quasar'
 import pkg from '@quasar/extras/package.json'
 const version = pkg.version
 import pkg2 from 'quasar-extras-svg-icons/package.json'
 const version2 = pkg2.version
+import pkg3 from '../../package.json'
+const appVersion = pkg3.version
+import { iconSets } from '../icon-sets'
+import { useStore } from 'assets/store.js'
 
+import {
+  fabGithub,
+  fabTwitter
+} from '@quasar/extras/fontawesome-v5'
 
 import {
   mdiMenu,
   mdiBrightness2,
   mdiBrightness5,
-  mdiSchool,
-  mdiForumOutline,
-  mdiDiscord,
-  mdiFacebook,
-  mdiTwitter,
-  mdiGithub,
-  mdiHeart
-} from '@quasar/extras/mdi-v5'
-
-const linksData = [
-  {
-    title: 'Docs',
-    caption: 'quasar.dev',
-    icon: mdiSchool,
-    link: 'https://quasar.dev'
-  },
-  {
-    title: 'Github',
-    caption: 'github.com/quasarframework',
-    icon: mdiGithub,
-    link: 'https://github.com/quasarframework'
-  },
-  {
-    title: 'Discord Chat Channel',
-    caption: 'chat.quasar.dev',
-    icon: mdiDiscord,
-    link: 'https://chat.quasar.dev'
-  },
-  {
-    title: 'Forum',
-    caption: 'forum.quasar.dev',
-    icon: mdiForumOutline,
-    link: 'https://forum.quasar.dev'
-  },
-  {
-    title: 'Twitter',
-    caption: '@quasarframework',
-    icon: mdiTwitter,
-    link: 'https://twitter.quasar.dev'
-  },
-  {
-    title: 'Facebook',
-    caption: '@QuasarFramework',
-    icon: mdiFacebook,
-    link: 'https://facebook.quasar.dev'
-  },
-  {
-    title: 'Quasar Awesome',
-    caption: 'Community Quasar projects',
-    icon: mdiHeart,
-    link: 'https://awesome.quasar.dev'
-  }
-]
+  mdiCartOutline,
+  mdiCartHeart,
+  mdiTrashCanOutline,
+  mdiPartyPopper,
+  mdiCharity
+} from '@quasar/extras/mdi-v6'
+
+const year = (new Date()).getFullYear()
 
 export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialLink },
-  data () {
+
+  setup () {
+    const store = useStore(),
+    $q = useQuasar()
+
+    const allImports = computed(() => {
+      let imports = '';
+      for (const packageName in store.cart) {
+        for (const iconSet in store.cart[ packageName ]) {
+          const icons = []
+
+          for (const iconName in store.cart[ packageName ][ iconSet ]) {
+            icons.push(iconName)
+          }
+
+          if (icons.length > 0) {
+            if (imports) imports += '\n'
+            imports += `import { ${ icons.join(', ') } } from '${ packageName }/${ iconSet }'`
+          }
+        }
+      }
+ 
+      return imports
+    })
+
+    const allInlined = computed(() => {
+      let inlined = ''
+      for (const packageName in store.cart) {
+        for (const iconSet in store.cart[ packageName ]) {
+          for (const iconName in store.cart[ packageName ][ iconSet ]) {
+            if (inlined) inlined += '\n'
+            inlined += `const ${ iconName } = '${ store.cart[ packageName ][ iconSet ][ iconName ] }'`
+          }
+        }
+      }
+
+      return inlined
+    })
+
+    function isActive (iconSet) {
+      return iconSet.value === store?.iconSet?.value
+    }
+
+    function onClickIconSet (iconSet) {
+      store.rightDrawerOpen = false
+      store.iconSet = iconSet
+    }
+
+    function toggleLeftDrawer () {
+      store.leftDrawerOpen = !store.leftDrawerOpen
+    }
+
+    function toggleRightDrawer () {
+      store.rightDrawerOpen = !store.rightDrawerOpen
+    }
+
+    function onCartRemoveAllItems () {
+      store.removeAll()
+    }
+
+    function importToClipboard (icon) {
+      const data = `import { ${ icon.iconName } } from '${ icon.packageName }/${ icon.iconSet }'`
+      copyToClipboard(data)
+        .then(() => {
+          $q.notify({
+            message: `Import for '${ icon.iconName }' copied to clipboard`,
+            position: 'top',
+            icon: icon.path,
+            color: 'white',
+            textColor: 'primary'
+          })
+        })
+    }
+
+    function onImportAll () {
+      copyToClipboard(allImports.value)
+        .then(() => {
+          $q.notify({
+            message: `All imported copied to clipboard`,
+            position: 'top',
+            icon: mdiPartyPopper,
+            color: 'white',
+            textColor: 'primary'
+          })
+        })
+    }
+
+    function onInlinedAll () {
+      copyToClipboard(allInlined.value)
+        .then(() => {
+          $q.notify({
+            message: `All inlined copied to clipboard`,
+            position: 'top',
+            icon: mdiPartyPopper,
+            color: 'white',
+            textColor: 'primary'
+          })
+        })
+    }
+
     return {
+      store,
       version,
       version2,
+      appVersion,
       mdiMenu,
       mdiBrightness2,
       mdiBrightness5,
-      mdiSchool,
-      mdiHeart,
-      mdiFacebook,
-      mdiTwitter,
-      mdiForumOutline,
-      mdiDiscord,
-      mdiGithub,
-      leftDrawerOpen: false,
-      essentialLinks: linksData
+      mdiCartOutline,
+      mdiCartHeart,
+      mdiTrashCanOutline,
+      toggleLeftDrawer,
+      toggleRightDrawer,
+      iconSets,
+      isActive,
+      onClickIconSet,
+      onCartRemoveAllItems,
+      importToClipboard,
+      onImportAll,
+      onInlinedAll,
+      year,
+      fabGithub,
+      fabTwitter,
+      mdiCharity
     }
   }
 })
 </script>
+
+<style lang="sass">
+.markdown-copyright
+  font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace
+
+.markdown-page__footer--icons
+  font-size: 28px
+
+  a
+    text-decoration: none
+    outline: 0
+    color: $primary
+    transition: color .28s
+
+    &:hover
+      color: $red-8
+
+</style>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index abeaf59..8bbac77 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -2,104 +2,198 @@
   <q-page>
     <q-dialog
       ref="dialogRef"
-      v-model="showDialog"
+      v-model="store.showIconDialog"
+      seamless
+      position="bottom"
     >
-      <q-card class="q-pa-md">
-        <div
-          class="row justify-center items-center"
-          style="max-width: 400px; max-height: 300px; width: 100%; height: 100%;"
-        >
-          <q-icon
-            :name="currentPath"
-            size="128px"
-            class="q-pa-xs"
-            :class="colorClasses"
-          />
-          <span
-            class="full-width text-center"
-            style="font-size: 28px;"
-          >{{ currentName }}</span>
-
-          <div class="row">
-            <div
-              v-for="color in colors"
-              :key="color"
-              :class="colorClass(color)"
-              style="width: 20px; height: 20px;"
-              @click.stop="changeColor(color)"
-              @mouseenter.stop="changeColor(color)"
-            />
-            <q-toggle
-              v-model="inverted"
-              label="Invert colors"
-            />
-          </div>
-
-          <q-btn-group push>
-            <q-btn
-              push
-              icon="mdi-content-copy"
-              @click="onCopyName(currentPath, currentName)"
-            >
-              <q-tooltip>Copy name to clipboard</q-tooltip>
-            </q-btn>
-            <q-btn
-              push
-              label="SVG"
-              @click="onCopySvg(currentPath, currentName)"
-            >
-              <q-tooltip>Copy SVG to clipboard</q-tooltip>
-            </q-btn>
-          </q-btn-group>
-        </div>
-      </q-card>
-    </q-dialog>
-    <div :class="headerClasses">
-      <q-select
-        v-model="icon"
-        dense
-        options-dense
-        outlined
-        clearable
-        :options="iconSets"
-        label="Select Icon set"
-        class="col-md-4 col-sm-12"
-        style="max-width: 280px; width: 100%; margin: 2px;"
+      <q-card
+        class="q-pa-sm"
+        :style="{ minWidth: screenWidth + 'px', minHeight: '200px'}"
       >
-        <template #option="scope">
-          <q-expansion-item
-            expand-separator
-            group="somegroup"
-            :default-opened="hasChild(scope)"
-            header-class="text-weight-bold"
-            :label="scope.opt.label"
+        <q-card-section class="row items-center no-wrap q-pa-sm">
+          <div
+            class="col row no-wrap"
           >
-            <template
-              v-for="child in scope.opt.children"
-              :key="child.label"
+            <p
+              class="font-mono ellipsis"
+              style="font-size: 28px;"
+            >
+              {{ currentName }}
+            </p>
+            <q-icon
+              size="xs"
+              name="mdi-content-copy"
+              color="grey-13"
+              @click="nameToClipboard"
             >
-              <q-item
-                v-ripple
-                v-close-popup
-                clickable
-                :class="{ 'bg-light-blue-1': icon === child }"
-                @click="icon = child"
+              <q-tooltip>Copy SVG name to clipboard</q-tooltip>
+            </q-icon>
+          </div>
+          <q-space />
+          <q-btn
+            flat
+            round
+            :icon="matClose"
+            @click="store.showIconDialog = false"
+          />
+        </q-card-section>
+
+        <q-card-section class="row items-center no-wrap q-pa-sm">
+          <div
+            class="row justify-center items-center"
+            style="width: 100%;"
+          >
+            <div class="column q-pa-sm">
+              <q-icon
+                :name="currentPath"
+                :size="store.iconSize"
+                class="q-pa-xs col-1"
+                :class="colorClasses"
+                style="max-width: 130px; min-width: 80px;"
+              />
+            </div>
+            <div class="column justify-start q-gutter-sm q-pa-sm">
+              <q-btn
+                no-caps
+                size="sm"
+                flat
+                style="max-width: 150px;"
+                class="col user-button"
+                @click="onHandleCart(currentPath, currentName)"
               >
-                <q-item-section>
-                  <q-item-label
-                    class="q-ml-md"
+                <div class="full-width row justify-between items-center ellipsis">
+                  <q-icon
+                    :name="cartButtonIcon"
+                    size="sm"
+                  />
+                  {{ cartButtonLabel }}
+                </div>
+              </q-btn>
+              <div class="col row">
+                <div
+                  v-for="color in colors"
+                  :key="color"
+                  :class="colorClass(color)"
+                  style="width: 20px; height: 20px;"
+                  @click.stop="changeColor(color)"
+                  @mouseenter.stop="changeColor(color)"
+                />
+              </div>
+              <q-toggle
+                v-model="inverted"
+                label="Invert colors"
+              />
+            </div>
+
+            <div class="column justify-start q-gutter-sm q-pa-sm">
+              <div class="col">
+                <div>Copy</div>
+                <div class="row q-gutter-xs">
+                  <q-btn
+                    no-caps
+                    size="sm"
+                    flat
+                    class="user-button"
+                    @click="nameToClipboard"
                   >
-                    {{ child.label }}
-                  </q-item-label>
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-expansion-item>
-        </template>
-      </q-select>
+                    <q-tooltip
+                      :delay="250"
+                      class="primary"
+                    >
+                      Copy SVG name to clipboard
+                    </q-tooltip>
+                    Name
+                  </q-btn>
+                  <q-btn
+                    no-caps
+                    size="sm"
+                    flat
+                    class="user-button"
+                    @click="inlineToClipboard"
+                  >
+                    <q-tooltip
+                      :delay="250"
+                      class="primary"
+                    >
+                      Copy SVG inlined to clipboard
+                    </q-tooltip>
+                    Inline
+                  </q-btn>
+                  <q-btn
+                    no-caps
+                    size="sm"
+                    flat
+                    class="user-button"
+                    @click="importToClipboard"
+                  >
+                    <q-tooltip
+                      :delay="250"
+                      class="primary"
+                    >
+                      Copy SVG import to clipboard
+                    </q-tooltip>
+                    Import
+                  </q-btn>
+                  <q-btn
+                    no-caps
+                    size="sm"
+                    flat
+                    class="user-button"
+                    @click="qiconToClipboard"
+                  >
+                    <q-tooltip
+                      :delay="250"
+                      class="primary"
+                    >
+                      Copy QIcon with SVG name to clipboard
+                    </q-tooltip>
+                    QIcon
+                  </q-btn>
+                  <q-btn
+                    no-caps
+                    size="sm"
+                    flat
+                    class="user-button"
+                    @click="qbtnToClipboard"
+                  >
+                    <q-tooltip
+                      :delay="250"
+                      class="primary"
+                    >
+                      Copy QBtn with SVG name to clipboard
+                    </q-tooltip>
 
-      <div class="row justify-center items-center col-md-4 col-sm-12">Totals: {{ filteredCount }}/{{ iconCount }}</div>
+                    QBtn
+                  </q-btn>
+                  <q-btn
+                    no-caps
+                    size="sm"
+                    flat
+                    class="user-button"
+                    @click="rawToClipboard"
+                  >
+                    <q-tooltip
+                      :delay="250"
+                      class="primary"
+                    >
+                      Copy raw SVG to clipboard
+                    </q-tooltip>
 
+                    Raw
+                  </q-btn>
+                </div>
+              </div>
+              <div class="col-auto">
+                <!-- other content here -->
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
+    <div :class="headerClasses">
+      <div class="row justify-center items-center col-md-4 col-sm-12">Totals: {{ filteredCount }}/{{ iconCount }}</div>
       <q-input
         v-model="filter"
         borderless
@@ -122,124 +216,132 @@
 
     <q-separator class="q-mb-xs" />
 
-    <div class="row justify-center">
-      <q-intersection
-        v-for="(path, name) in icons"
-        :key="name"
-        once
-        class="intersetion-icon-box col-xl-1 col-lg-2 col-md-3 col-sm-4 col-xs-6"
-        @click="onClick(path, name)"
-      >
-        <div class="intersetion-icon-box--inner row full-width justify-center items-center overflow-hidden ellipsis">
-          <q-icon
-            :name="path"
-            size="60px"
-            class="q-pa-xs row full-width justify-center items-center"
-          />
-          <div
-            class="row full-width justify-center items-center ellipsis"
-            style="font-size: 10px;"
-          >
-            {{ name }}
-          </div>
-          <q-tooltip
-            :delay="1000"
-            class="primary"
-          >
-            {{ name }}
-          </q-tooltip>
-        </div>
-      </q-intersection>
-    </div>
+    <template v-if="Object.keys(icons).length">
+      <svg-icon-viewer
+        :icons="icons"
+        :selected-name="currentName"
+        @selected="onSelected"
+      />
+    </template>
 
     <div class="icons-footer" />
 
     <q-page-scroller
       expand
-      position="bottom"
+      position="bottom-right"
       :scroll-offset="150"
-      :offset="[0, 0]"
+      :offset="[8, 8]"
     >
-      <div class="col cursor-pointer q-pa-sm text-center glass">
-        <q-icon
-          name="mdi-chevron-up"
-          size="lg"
-        />
-      </div>
+      <q-btn
+        fab
+        :icon="matKeyboardArrowUp"
+        class="glass"
+      />
     </q-page-scroller>
   </q-page>
 </template>
 
 <script>
-import { defineComponent, markRaw } from 'vue'
-import { copyToClipboard } from 'quasar'
+import { defineComponent, markRaw, ref, computed, watch, nextTick } from 'vue'
+import { useQuasar, copyToClipboard } from 'quasar'
 import { iconSets } from 'src/icon-sets'
+import { useStore } from 'assets/store.js'
+import { matClose, matAdd, matKeyboardArrowUp } from '@quasar/extras/material-icons'
+import SvgIconViewer from '../components/SvgIconViewer.vue'
 
 export default defineComponent({
-  name: 'SvgIconViewer',
+  name: 'MainPage',
 
-  data () {
-    return {
-      icon: null,
-      iconSets,
-      importedIcons: null,
-      filter: '',
-      dialogRef: null,
-      showDialog: false,
-      currentPath: '',
-      currentName: '',
-      textColor: 'black',
-      colors: [
+  components: {
+    SvgIconViewer
+  },
+
+  setup () {
+    const store = useStore(),
+      importedIcons = ref(null),
+      filter = ref(''),
+      dialogRef = ref(null),
+      currentPath = ref(''),
+      currentName = ref(''),
+      inverted = ref(false),
+      textColor = ref('black'),
+      $q = useQuasar(),
+      colors = [
         'black',
         'red', 'pink', 'purple', 'deep-purple', 'indigo',
         'blue', 'light-blue', 'cyan', 'teal', 'green',
         'light-green', 'lime', 'yellow', 'amber', 'orange',
-        'deep-orange', 'brown', 'grey', 'blue-grey'
-      ],
-      inverted: false
-    }
-  },
+        'deep-orange', 'brown', 'grey', 'blue-grey',
+        'white'
+      ]
+
+    const screenWidth = computed(() => {
+      return $q.screen.width - 15 // scrollbars
+    })
 
-  computed: {
-    headerClasses () {
-      return (this.$q.screen.lt.sm ? 'column' : 'row')
+    const headerClasses = computed(() => {
+      return ($q.screen.lt.sm ? 'column' : 'row')
         + ' justify-center items-center q-pa-xs'
-    },
-    colorClasses () {
+    })
+
+    const colorClasses = computed(() => {
       let color = ''
-      let bgColor = 'bg-white'
-      if (this.inverted) {
-        color += 'bg-' + this.textColor
-        bgColor = 'text-white'
+      if (inverted.value) {
+        color += 'bg-' + textColor.value
       }
       else {
-        color += 'text-' + this.textColor
+        color += 'text-' + textColor.value
       }
-      if (this.textColor !== 'black') color += '-8'
-      return color + ' ' + bgColor
-    },
-    icons () {
+      if (textColor.value !== 'black' && textColor.value !== 'white') color += '-8'
+      return color
+    })
+
+    const isInCart = computed(() => {
+      return store.isCartIcon(currentName.value)
+    })
+
+    // returns a list of filtered icons
+    const icons = computed(() => {
       const vals = {}
-      const filter = this.filter && this.importedIcons ? this.filter.toLowerCase() : ''
-      Object.keys(this.importedIcons ? this.importedIcons : {}).forEach(name => {
-        if (filter === '' || name.toLowerCase().indexOf(filter) > -1) {
-          vals[ name ] = this.importedIcons[ name ]
+      const f = filter.value && importedIcons.value ? filter.value.toLowerCase() : ''
+      Object.keys(importedIcons.value ? importedIcons.value : {}).forEach(name => {
+        if (f === '' || name.toLowerCase().indexOf(f) > -1) {
+          vals[ name ] = importedIcons.value[ name ]
         }
       })
       return vals
-    },
-    filteredCount () {
-      return Object.keys(this.icons).length
-    },
-    iconCount () {
-      return this.importedIcons ? Object.keys(this.importedIcons).length : 0
-    }
-  },
+    })
+
+    // returns a countof all filtered icons
+    const filteredCount = computed(() => {
+      return Object.keys(icons.value).length
+    })
+
+    // returns a count of all loaded icons
+    const iconCount = computed(() => {
+      return importedIcons.value ? Object.keys(importedIcons.value).length : 0
+    })
 
-  watch: {
-    icon (val) {
+    // retrns the text to use for "Add to library"/"Remove from library" button
+    const cartButtonLabel = computed(() => {
+      if (isInCart.value !== true) {
+        return 'Add to library'
+      }
+      return 'Remove from library'
+    })
+
+    // retrns the icon to use for "Add to library"/"Remove from library" button
+    const cartButtonIcon = computed(() => {
+      if (isInCart.value !== true) {
+        return matAdd
+      }
+      return matClose
+    })
+
+    // watches iconSet and loads new icons when it changes
+    watch(() => store.iconSet, val => {
       if (!val) {
-        this.importedIcons = null
+        importedIcons.value = null
         return
       }
 
@@ -251,9 +353,9 @@ export default defineComponent({
           /* webpackExclude: /(mdi-v4|ionicons-v4)/ */
           '@quasar/extras/' + val.value
         ).then(async svgFile => {
-          this.importedIcons = markRaw(svgFile)
+          importedIcons.value = markRaw(svgFile)
           console.log(`${ val.value } Load (ms):`, new Date() - now)
-          await this.$nextTick()
+          await nextTick()
           console.log(`${ val.value } Render (ms):`, new Date() - now)
         })
       }
@@ -263,89 +365,146 @@ export default defineComponent({
           /* webpackInclude: /index\.js$/ */
           'quasar-extras-svg-icons/' + val.value
         ).then(async svgFile => {
-          this.importedIcons = markRaw(svgFile)
+          importedIcons.value = markRaw(svgFile)
           console.log(`${ val.value } Load (ms):`, new Date() - now)
-          await this.$nextTick()
+          await nextTick()
           console.log(`${ val.value } Render (ms):`, new Date() - now)
         })
       }
-    },
+    })
 
-    showDialog (val) {
-      if (!val) {
-        this.textColor = 'black'
+    watch(() => store.showIconDialog,  val => {
+      if (val) store.rightDrawerOpen = false
+      else {
+        textColor.value = 'black'
       }
-    }
-  },
+    })
+
+    watch(() => store.leftDrawerOpen, val => {
+      if (val) store.showIconDialog = false
+    })
 
-  methods: {
-    colorClass (color) {
+    watch(() => store.rightDrawerOpen, val => {
+      if (val) store.showIconDialog = false
+    })
+
+    function colorClass (color) {
       let newColor = 'bg-' + color
-      if (color !== 'black') newColor += '-8'
-      if (this.textColor === color) {
+      if (color !== 'black' && color !== 'white') newColor += '-8'
+      if (textColor.value === color) {
         newColor += ' active-color'
       }
       return newColor
-    },
+    }
 
-    changeColor (color) {
-      this.textColor = color
-    },
+    function changeColor (color) {
+      textColor.value = color
+    }
 
-    hasChild (scope) {
-      return scope.opt.children.some(c => this.icon && c.value === this.icon.value)
-    },
+    // called when user clicks on an icon
+    function onSelected ({ path, name }) {
+      currentPath.value = path
+      currentName.value = name
+      store.showIconDialog = true
+      store.rightDrawerOpen = false
+    }
 
-    onClick (path, name) {
-      this.currentPath = path
-      this.currentName = name
-      this.showDialog = true
-    },
+    // removes or adds item from the cart
+    function onHandleCart (path, name) {
+      if (store.isCartIcon(name)) {
+        store.removeItem(store.iconSet.packageName, store.iconSet.value, name)
+        return
+      }
+      store.addItem(store.iconSet.packageName, store.iconSet.value, name, path)
+    }
 
-    onClickDialog (path, name) {
-      copyToClipboard(name)
+    // sends requested data to th clipboard with specified message and icon
+    function sendToClipboard (data, message, icon) {
+      copyToClipboard(data)
         .then(() => {
-          this.$q.notify({
-            message: `'${ name }' copied to clipboard`,
-            icon: path,
+          $q.notify({
+            message: message,
+            position: 'top',
+            icon: icon,
             color: 'white',
             textColor: 'primary'
           })
-          this.showDialog = false
         })
-    },
+    }
 
-    onCopyName (path, name) {
-      copyToClipboard(name)
-        .then(() => {
-          this.$q.notify({
-            message: `'${ name }' copied to clipboard`,
-            icon: path,
-            color: 'white',
-            textColor: 'primary'
-          })
-          this.showDialog = false
-        })
-    },
+    function nameToClipboard () {
+      sendToClipboard(currentName.value, `Name: '${ currentName.value }' copied to clipboard`, currentPath.value)
+    }
 
-    onCopySvg (path, name) {
-      copyToClipboard(path)
-        .then(() => {
-          this.$q.notify({
-            message: `'${ name }' SVG copied to clipboard`,
-            icon: path,
-            color: 'white',
-            textColor: 'primary'
-          })
-          this.showDialog = false
-        })
+    function rawToClipboard () {
+      sendToClipboard(currentPath.value, `Raw: '${ currentName.value }' copied to clipboard`, currentPath.value)
+
+    }
+
+    function inlineToClipboard () {
+      const inline = `const ${ currentName.value } = '${ currentPath.value }'`
+      sendToClipboard(inline, `Inline: '${ currentName.value }' copied to clipboard`, currentPath.value)
+    }
+
+    function importToClipboard () {
+      const inline = `import { ${ currentName.value } } from '${ store.iconSet.packageName }/${ store.iconSet.value }'`
+      sendToClipboard(inline, `Import: '${ currentName.value }' copied to clipboard`, currentPath.value)
+    }
+
+    function qiconToClipboard( ) {
+      const inline = `<q-icon :name="${ currentName.value }" />`
+      sendToClipboard(inline, `QIcon: '${ currentName.value }' copied to clipboard`, currentPath.value)
+    }
+
+    function qbtnToClipboard () {
+      const inline = `<q-btn :icon="${ currentName.value }" />`
+      sendToClipboard(inline, `QBtn: '${ currentName.value }' copied to clipboard`, currentPath.value)
+    }
+
+    return {
+      store,
+      filter,
+      dialogRef,
+      currentPath,
+      currentName,
+      headerClasses,
+      colorClasses,
+      cartButtonLabel,
+      cartButtonIcon,
+      colors,
+      inverted,
+      filteredCount,
+      iconCount,
+      icons,
+      screenWidth,
+      matClose,
+      matKeyboardArrowUp,
+      colorClass,
+      changeColor,
+      onSelected,
+      onHandleCart,
+      nameToClipboard,
+      rawToClipboard,
+      inlineToClipboard,
+      importToClipboard,
+      qiconToClipboard,
+      qbtnToClipboard
     }
   }
 })
 </script>
 
-<style>
-.active-color {
-  border: 1px dashed white;
-}
+<style lang="sass">
+.active-color
+  border: 1px dashed white
+
+.close-button
+  position: absolute
+  top: 0
+  right: 0
+
+.user-button
+  border-radius: 8px
+  border: 1px solid lightgrey
+
 </style>
diff --git a/yarn.lock b/yarn.lock
index 0c6bdba..80699f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1736,6 +1736,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz#87de7af9c231826fdd68ac7258f77c429e0e5fcf"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
+"@iconify/json@^1.1.423":
+  version "1.1.423"
+  resolved "https://registry.yarnpkg.com/@iconify/json/-/json-1.1.423.tgz#3507db88e10a58b63f78e817200f07eacb1a2c1e"
+  integrity sha512-CiL83VD0sUKKeEWha4PadLiJ+HNxN8gJO6MiAy6koIOu7FAI69vtR8BpfxfnuXf1EpKbBDvDaQbHsEYdzwRxJw==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"