diff --git a/src/_nav.js b/src/_nav.js
index 00378de3..cf64ed56 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -3,7 +3,7 @@ export default {
     {
       name: 'Dashboard',
       url: '/dashboard',
-      icon: 'icon-speedometer',
+      icon: 'cui-speedometer',
       badge: {
         variant: 'primary',
         text: 'NEW'
@@ -21,12 +21,12 @@ export default {
     {
       name: 'Colors',
       url: '/theme/colors',
-      icon: 'icon-drop'
+      icon: 'cui-drop'
     },
     {
       name: 'Typography',
       url: '/theme/typography',
-      icon: 'icon-pencil'
+      icon: 'cui-pencil'
     },
     {
       title: true,
@@ -40,131 +40,131 @@ export default {
     {
       name: 'Base',
       url: '/base',
-      icon: 'icon-puzzle',
+      icon: 'cui-puzzle',
       children: [
         {
           name: 'Breadcrumbs',
           url: '/base/breadcrumbs',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Cards',
           url: '/base/cards',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Carousels',
           url: '/base/carousels',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Collapses',
           url: '/base/collapses',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Forms',
           url: '/base/forms',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Jumbotrons',
           url: '/base/jumbotrons',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'List Groups',
           url: '/base/list-groups',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Navs',
           url: '/base/navs',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Navbars',
           url: '/base/navbars',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Paginations',
           url: '/base/paginations',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Popovers',
           url: '/base/popovers',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Progress Bars',
           url: '/base/progress-bars',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Switches',
           url: '/base/switches',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Tables',
           url: '/base/tables',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Tabs',
           url: '/base/tabs',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         },
         {
           name: 'Tooltips',
           url: '/base/tooltips',
-          icon: 'icon-puzzle'
+          icon: 'cui-puzzle'
         }
       ]
     },
     {
       name: 'Buttons',
       url: '/buttons',
-      icon: 'icon-cursor',
+      icon: 'cui-cursor',
       children: [
         {
           name: 'Buttons',
           url: '/buttons/standard-buttons',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         },
         {
           name: 'Button Dropdowns',
           url: '/buttons/dropdowns',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         },
         {
           name: 'Button Groups',
           url: '/buttons/button-groups',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         },
         {
           name: 'Brand Buttons',
           url: '/buttons/brand-buttons',
-          icon: 'icon-cursor'
+          icon: 'cui-cursor'
         }
       ]
     },
     {
       name: 'Charts',
       url: '/charts',
-      icon: 'icon-pie-chart'
+      icon: 'cui-pie-chart'
     },
     {
       name: 'Icons',
       url: '/icons',
-      icon: 'icon-star',
+      icon: 'cui-star',
       children: [
         {
           name: 'CoreUI Icons',
           url: '/icons/coreui-icons',
-          icon: 'icon-star',
+          icon: 'cui-star',
           badge: {
             variant: 'info',
             text: 'NEW'
@@ -173,12 +173,12 @@ export default {
         {
           name: 'Flags',
           url: '/icons/flags',
-          icon: 'icon-star'
+          icon: 'cui-star'
         },
         {
           name: 'Font Awesome',
           url: '/icons/font-awesome',
-          icon: 'icon-star',
+          icon: 'cui-star',
           badge: {
             variant: 'secondary',
             text: '4.7'
@@ -187,36 +187,36 @@ export default {
         {
           name: 'Simple Line Icons',
           url: '/icons/simple-line-icons',
-          icon: 'icon-star'
+          icon: 'cui-star'
         }
       ]
     },
     {
       name: 'Notifications',
       url: '/notifications',
-      icon: 'icon-bell',
+      icon: 'cui-bell',
       children: [
         {
           name: 'Alerts',
           url: '/notifications/alerts',
-          icon: 'icon-bell'
+          icon: 'cui-bell'
         },
         {
           name: 'Badges',
           url: '/notifications/badges',
-          icon: 'icon-bell'
+          icon: 'cui-bell'
         },
         {
           name: 'Modals',
           url: '/notifications/modals',
-          icon: 'icon-bell'
+          icon: 'cui-bell'
         }
       ]
     },
     {
       name: 'Widgets',
       url: '/widgets',
-      icon: 'icon-calculator',
+      icon: 'cui-calculator',
       badge: {
         variant: 'primary',
         text: 'NEW'
@@ -232,41 +232,41 @@ export default {
     {
       name: 'Pages',
       url: '/pages',
-      icon: 'icon-star',
+      icon: 'cui-star',
       children: [
         {
           name: 'Login',
           url: '/pages/login',
-          icon: 'icon-star'
+          icon: 'cui-star'
         },
         {
           name: 'Register',
           url: '/pages/register',
-          icon: 'icon-star'
+          icon: 'cui-star'
         },
         {
           name: 'Error 404',
           url: '/pages/404',
-          icon: 'icon-star'
+          icon: 'cui-star'
         },
         {
           name: 'Error 500',
           url: '/pages/500',
-          icon: 'icon-star'
+          icon: 'cui-star'
         }
       ]
     },
     {
       name: 'Download CoreUI',
       url: 'http://coreui.io/vue/',
-      icon: 'icon-cloud-download',
+      icon: 'cui-cloud-download',
       class: 'mt-auto',
       variant: 'success'
     },
     {
       name: 'Try CoreUI PRO',
       url: 'http://coreui.io/pro/vue/',
-      icon: 'icon-layers',
+      icon: 'cui-layers',
       variant: 'danger'
     }
   ]
diff --git a/src/containers/DefaultHeaderDropdownAccnt.vue b/src/containers/DefaultHeaderDropdownAccnt.vue
index bc0cfd84..9a53623a 100644
--- a/src/containers/DefaultHeaderDropdownAccnt.vue
+++ b/src/containers/DefaultHeaderDropdownAccnt.vue
@@ -16,19 +16,19 @@
       <strong>Account</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="fa fa-bell-o" /> Updates
+      <i class="cui-bell"/> Updates
       <CBadge variant="info" additionalClasses="hehe">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-envelope-o" /> Messages
+      <i class="cui-envelope-open" /> Messages
       <CBadge variant="success">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-tasks" /> Tasks
+      <i class="cui-task" /> Tasks
       <CBadge variant="danger">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-comments" /> Comments
+      <i class="cui-comment-square" /> Comments
       <CBadge variant="warning">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownHeader
@@ -38,25 +38,25 @@
       <strong>Settings</strong>
     </CDropdownHeader>
     <CDropdownItem>
-      <i class="fa fa-user" /> Profile
+      <i class="cui-user" /> Profile
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-wrench" /> Settings
+      <i class="cui-wrench" /> Settings
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-usd" /> Payments
+      <i class="cui-dollar" /> Payments
       <CBadge variant="secondary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-file" /> Projects
+      <i class="cui-file" /> Projects
       <CBadge variant="primary">{{ itemsCount }}</CBadge>
     </CDropdownItem>
     <CDropdownDivider/>
     <CDropdownItem>
-      <i class="fa fa-shield" /> Lock Account
+      <i class="cui-shield" /> Lock Account
     </CDropdownItem>
     <CDropdownItem>
-      <i class="fa fa-lock" /> Logout
+      <i class="cui-lock-locked" /> Logout
     </CDropdownItem>
   </CDropdown>
 </template>
diff --git a/src/containers/TheAside.vue b/src/containers/TheAside.vue
index f70025c5..6e6e8fc9 100644
--- a/src/containers/TheAside.vue
+++ b/src/containers/TheAside.vue
@@ -3,7 +3,7 @@
     <CTabs addTabClasses="c-p-0">
       <CTab active>
         <template slot="title">
-          <i class="icon-list"></i>
+          <i class="cui-list"></i>
         </template>
         <CListGroup class="c-list-group-accent">
           <CListGroupItem
@@ -18,10 +18,10 @@
               <strong>Lucas</strong>
             </div>
             <small class="c-text-muted c-mr-3">
-              <i class="icon-calendar"></i>&nbsp;&nbsp;1 - 3pm
+              <i class="cui-calendar"></i>&nbsp;&nbsp;1 - 3pm
             </small>
             <small class="c-text-muted">
-              <i class="icon-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
+              <i class="cui-location-pin"></i>&nbsp;&nbsp;Palo Alto, CA
             </small>
           </CListGroupItem>
           <CListGroupItem href="#" class="c-list-group-item-accent-info">
@@ -31,9 +31,11 @@
             <div>Skype with <strong>Megan</strong>
             </div>
             <small class="c-text-muted mr-3">
-              <i class="icon-calendar"></i>&nbsp;&nbsp;4 - 5pm
+              <i class="cui-calendar"></i>&nbsp;&nbsp;4 - 5pm
+            </small>
+            <small class="c-text-muted">
+              <CIcon name="socialSkype" height="11"/></i>&nbsp;&nbsp;On-line
             </small>
-            <small class="c-text-muted"><i class="icon-social-skype"></i>&nbsp;&nbsp;On-line</small>
           </CListGroupItem>
           <hr class="c-transparent c-mx-3 c-my-0">
           <CListGroupItem class="c-list-group-item-accent-secondary c-bg-light c-text-center c-font-weight-bold c-text-muted c-text-uppercase small">
@@ -42,8 +44,8 @@
           <CListGroupItem href="#" class="c-list-group-item-accent-danger c-list-group-item-divider">
             <div>New UI Project - <strong>deadline</strong>
             </div>
-            <small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
-            <small class="c-text-muted"><i class="icon-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
+            <small class="c-text-muted c-mr-3"><i class="cui-calendar"></i>&nbsp;&nbsp;10 - 11pm</small>
+            <small class="c-text-muted"><i class="cui-home"></i>&nbsp;&nbsp;creativeLabs HQ</small>
             <div class="c-avatars-stack c-mt-2">
               <div class="c-avatar c-avatar-xs">
                 <img class="c-img-avatar" src="img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
@@ -64,13 +66,13 @@
           </CListGroupItem>
           <CListGroupItem href="#" class="c-list-group-item-accent-success c-list-group-item-divider">
             <div><strong>#10 Startups.Garden</strong> Meetup</div>
-            <small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp; 1 - 3pm</small>
-            <small class="c-text-muted"><i class="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
+            <small class="c-text-muted c-mr-3"><i class="cui-calendar"></i>&nbsp; 1 - 3pm</small>
+            <small class="c-text-muted"><i class="cui-location-pin"></i>&nbsp; Palo Alto, CA</small>
           </CListGroupItem>
           <CListGroupItem href="#" class="c-list-group-item-accent-primary c-list-group-item-divider">
             <div><strong>Team meeting</strong></div>
-            <small class="c-text-muted c-mr-3"><i class="icon-calendar"></i>&nbsp; 4 - 6pm</small>
-            <small class="c-text-muted"><i class="icon-home"></i>&nbsp; creativeLabs HQ</small>
+            <small class="c-text-muted c-mr-3"><i class="cui-calendar"></i>&nbsp; 4 - 6pm</small>
+            <small class="c-text-muted"><i class="cui-home"></i>&nbsp; creativeLabs HQ</small>
             <div class="c-avatars-stack c-mt-2">
               <div class="c-avatar c-avatar-xs">
                 <img src="img/avatars/2.jpg" class="c-img-avatar" alt="admin@bootstrapmaster.com">
@@ -99,7 +101,7 @@
       </CTab>
       <CTab>
         <template slot="title">
-          <i class='icon-speech'></i>
+          <i class='cui-speech'></i>
         </template>
         <div class="c-p-3">
           <div class="c-message">
@@ -180,7 +182,7 @@
       </CTab>
       <CTab>
         <template slot="title">
-          <i class="icon-settings"></i>
+          <i class="cui-settings"></i>
         </template>
         <div class="c-p-3">
           <h6>Settings</h6>
diff --git a/src/containers/TheHeader.vue b/src/containers/TheHeader.vue
index fc6c25e5..5e5b46ef 100644
--- a/src/containers/TheHeader.vue
+++ b/src/containers/TheHeader.vue
@@ -13,14 +13,14 @@
     </CNavbarNav>
     <CNav class="c-header-nav c-ml-auto">
       <CNavItem class="c-d-md-down-none">
-        <i class="icon-bell"></i>
+        <i class="cui-bell"></i>
         <CBadge pill variant="danger">5</CBadge>
       </CNavItem>
       <CNavItem class="c-d-md-down-none">
-        <i class="icon-list"></i>
+        <i class="cui-list"></i>
       </CNavItem>
       <CNavItem class="d-md-down-none">
-        <i class="icon-location-pin"></i>
+        <i class="cui-location-pin"></i>
       </CNavItem>
       <DefaultHeaderDropdownAccnt/>
     </CNav>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index f365fe81..16fbc00f 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <WidgetsDropdown/>
     <CCard>
       <CCardBody>
@@ -10,7 +10,7 @@
           </CCol>
           <CCol sm="7" class="c-d-none c-d-md-block">
             <CButton variant="primary" class="c-float-right">
-              <i class="icon-cloud-download"></i>
+              <i class="cui-cloud-download"></i>
             </CButton>
             <CButtonGroup class="c-float-right c-mr-3">
               <CButton
@@ -265,7 +265,7 @@
               <ul class="c-horizontal-bars c-type-2">
                 <div class="c-progress-group">
                   <div class="c-progress-group-header">
-                    <i class="icon-user c-progress-group-icon"></i>
+                    <i class="cui-user c-progress-group-icon"></i>
                     <span class="c-title">Male</span>
                     <span class="c-ml-auto c-font-weight-bold">43%</span>
                   </div>
@@ -279,7 +279,7 @@
                 </div>
                 <div class="c-progress-group c-mb-5">
                   <div class="c-progress-group-header">
-                    <i class="icon-user-female c-progress-group-icon"></i>
+                    <i class="cui-user-female c-progress-group-icon"></i>
                     <span class="c-title">Female</span>
                     <span class="c-ml-auto c-font-weight-bold">37%</span>
                   </div>
@@ -293,7 +293,7 @@
                 </div>
                 <div class="c-progress-group">
                   <div class="c-progress-group-header">
-                    <i class="icon-globe c-progress-group-icon"></i>
+                    <i class="cui-globe c-progress-group-icon"></i>
                     <span class="c-title">Organic Search</span>
                     <span class="c-ml-auto c-font-weight-bold">
                       191,235<span class="text-muted small">(56%)</span>
@@ -309,7 +309,11 @@
                 </div>
                 <div class="c-progress-group">
                   <div class="c-progress-group-header">
-                    <i class="icon-social-facebook c-progress-group-icon"></i>
+                    <CIcon
+                      name="socialFacebook"
+                      height="17"
+                      class="c-progress-group-icon"
+                    />
                     <span class="c-title">Facebook</span>
                     <span class="c-ml-auto c-font-weight-bold">
                       51,223 <span class="c-text-muted small">(15%)</span>
@@ -325,7 +329,11 @@
                 </div>
                 <div class="c-progress-group">
                   <div class="c-progress-group-header">
-                    <i class="icon-social-twitter c-progress-group-icon"></i>
+                    <CIcon
+                      name="socialTwitter"
+                      height="17"
+                      class="c-progress-group-icon"
+                    />
                     <span class="c-title">Twitter</span>
                     <span class="c-ml-auto c-font-weight-bold">
                       37,564 <span class="c-text-muted c-small">(11%)</span>
@@ -341,7 +349,11 @@
                 </div>
                 <div class="c-progress-group">
                   <div class="c-progress-group-header">
-                    <i class="icon-social-linkedin c-progress-group-icon"></i>
+                    <CIcon
+                      name="socialLinkedin" 
+                      height="17"
+                      class="c-progress-group-icon"
+                    />
                     <span class="c-title">LinkedIn</span>
                     <span class="c-ml-auto c-font-weight-bold">
                       27,319 <span class="c-text-muted small">&nbsp;(8%)</span>
@@ -357,7 +369,7 @@
                 </div>
                 <div class="c-divider c-text-center">
                   <CButton variant="link" size="sm" class="c-text-muted">
-                    <i class="icon-options"></i>
+                    <i class="cui-options"></i>
                   </CButton>
                 </div>
               </ul>
@@ -396,7 +408,7 @@
             <td
               slot="country"
               slot-scope="{item}"
-              class="text-center"
+              class="c-text-center"
             >
               <i
                 class="c-h4 c-mb-0"
@@ -509,11 +521,11 @@ export default {
         }
       ],
       tableFields: [
-        { key: 'avatar', label: '<i class="icon-people"></i>',},
+        { key: 'avatar', _classes: 'c-text-center' },
         { key: 'user' },
-        { key: 'country' },
+        { key: 'country', _classes: 'c-text-center' },
         { key: 'usage' },
-        { key: 'payment', label: 'Payment method' },
+        { key: 'payment', label: 'Payment method', _classes: 'c-text-center' },
         { key: 'activity' },
       ]
     }
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index 776ae11b..36049260 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -9,7 +9,7 @@
       </CCol>
       <CCol sm="6" md="4">
         <CCard
-          headerHtml="<i class='fa fa-check'></i> Card with icon"
+          headerHtml="<i class='cui-check'></i> Card with icon"
           :bodyHtml="loremIpsum"
         />
       </CCol>
@@ -221,13 +221,13 @@
               Card with header actions
               <div class="c-card-header-actions">
                 <CLink href="#" class="c-card-header-action btn-setting" >
-                  <i class="icon-settings"></i>
+                  <i class="cui-settings"></i>
                 </CLink>
                 <CLink class="c-card-header-action btn-minimize" @click="isCollapsed = !isCollapsed">
-                  <i :class="`icon-arrow-${ !isCollapsed ? 'up' : 'down'}`"></i>
+                  <i :class="`cui-chevron-${isCollapsed ? 'bottom' : 'top'}`"></i>
                 </CLink>
                 <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = false">
-                  <i class="icon-close"></i>
+                  <i class="cui-circle-x"></i>
                 </CLink>
               </div>
             </CCardHeader>
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index bcf024da..140e1e67 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="animated fadeIn">
+  <div class="c-animated c-fadeIn">
     <CRow>
       <CCol sm="6">
         <CCard>
@@ -175,11 +175,11 @@
                 disabled
               />
               <template v-for="(name, key) in checkboxNames">
-                <div class="form-row form-group" :key="name">
-                  <CCol sm="3">
+                <div class="c-form-group c-form-row" :key="name">
+                  <CCol tag="label" sm="3" class="c-col-form-label">
                     {{name}}
                   </CCol>
-                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
+                  <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
                     <CFormCheckbox
                       v-for="option in options"
                       :key="option"
@@ -194,11 +194,11 @@
                 </div>
               </template>
               <template v-for="(name, key) in radioNames">
-                <div class="form-row form-group" :key="name">
+                <div class="c-form-row c-form-group" :key="name">
                   <CCol sm="3">
                     {{name}}
                   </CCol>
-                  <CCol sm="9" :class="key % 2 === 1 ? 'form-inline' : ''">
+                  <CCol sm="9" :class="key % 2 === 1 ? 'c-form-inline' : ''">
                     <CFormRadio
                       v-for="(option, optKey) in options"
                       :key="option"
@@ -236,8 +236,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -249,20 +249,26 @@
             <!-- Bootstrap Vue has some problems with Inline forms that's why we use some standard bootstrap classes -->
             <CForm inline>
               <CFormInput
-                class="mr-2"
-                label="<small>Name:&nbsp;</small>"
+                class="c-mr-2"
                 placeholder="Jane Doe"
-              />
+              >
+                <template #label>
+                  <small>Name:&nbsp;</small>
+                </template>
+              </CFormInput>
               <CFormInput
-                label="<small>Email:&nbsp;</small>"
                 placeholder="jane.doe@example.com"
                 autocomplete="email"
-              />
+              >
+                <template #label>
+                  <small>Email:&nbsp;</small>
+                </template>
+              </CFormInput>
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -289,12 +295,12 @@
                 horizontal
                 placeholder="Enter Password..."
               />
-              <CCardFooter>
-                <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-                <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
-              </CCardFooter>
             </CForm>
           </CCardBody>
+          <CCardFooter>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+          </CCardFooter>
         </CCard>
         <CCard>
           <CCardHeader>
@@ -322,8 +328,8 @@
               />
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-              <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+              <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
+              <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
             </CCardFooter>
           </CForm>
         </CCard>
@@ -332,60 +338,60 @@
             Input <strong>Grid</strong>
           </CCardHeader>
           <CCardBody>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="3">
-                <CFormInput class="mb-0" placeholder=".col-sm-3"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-3"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="4">
-                <CFormInput class="mb-0" placeholder=".col-sm-4"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-4"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="5">
-                <CFormInput class="mb-0" placeholder=".col-sm-5"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-5"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="6">
-                <CFormInput class="mb-0" placeholder=".col-sm-6"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-6"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="7">
-                <CFormInput class="mb-0" placeholder=".col-sm-7"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-7"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="8">
-                <CFormInput class="mb-0" placeholder=".col-sm-8"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-8"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="9">
-                <CFormInput class="mb-0" placeholder=".col-sm-9"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-9"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="10">
-                <CFormInput class="mb-0" placeholder=".col-sm-10"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-10"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="11">
-                <CFormInput class="mb-0" placeholder=".col-sm-11"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-11"/>
               </CCol>
             </CRow>
-            <CRow class="form-group">
+            <CRow class="c-form-group">
               <CCol sm="12">
-                <CFormInput class="mb-0" placeholder=".col-sm-12"/>
+                <CFormInput class="c-mb-0" placeholder=".col-sm-12"/>
               </CCol>
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-user"></i> Login</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -412,8 +418,8 @@
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -475,23 +481,23 @@
           <CCardBody>
             <CFormInput
               placeholder="Username"
-              prependHtml="<i class='fa fa-user'></i>"
+              prependHtml="<i class='cui-user'></i>"
             />
             <CFormInput
               type="email"
               placeholder="Email"
               autocomplete="email"
-              appendHtml="<i class='fa fa-envelope-o'></i>"
+              appendHtml="<i class='cui-envelope-open'></i>"
             />
             <CFormInput
-              prependHtml="<i class='fa fa-euro'></i>"
+              prependHtml="<i class='cui-euro'></i>"
               placeholder="ex. $1.000.000"
               appendHtml=".00"
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -503,7 +509,9 @@
           <CCardBody>
             <CFormInput placeholder="Username">
               <template #prepend>
-                <CButton variant="primary"><i class="fa fa-search"></i> Search</CButton>
+                <CButton variant="primary">
+                  <i class="cui-magnifying-glass"></i> Search
+                </CButton>
               </template>
             </CFormInput>
             <CFormInput
@@ -529,8 +537,8 @@
             </CFormInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -602,8 +610,8 @@
             </CFormInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="fa fa-dot-circle-o"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="fa fa-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -616,15 +624,15 @@
           </CCardHeader>
           <CCardBody>
             <CRow
-              class="form-group"
+              class="c-form-group"
               v-for="(number, key) in [4,5,6,7,8]"
               :key="key"
             >
               <CCol :col="12 - number">
-                <CFormInput class="mb-0" :placeholder="`.col-md-${12 - number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-md-${12 - number}`"/>
               </CCol>
               <CCol :col="number">
-                <CFormInput class="mb-0" :placeholder="`.col-md-${number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-md-${number}`"/>
               </CCol>
             </CRow>
           </CCardBody>
@@ -644,15 +652,15 @@
           </CCardHeader>
           <CCardBody>
             <CRow
-              class="form-group"
+              class="c-form-group"
               v-for="(number, key) in [4,5,6,7,8]"
               :key="key"
             >
               <CCol :col="number">
-                <CFormInput class="mb-0" :placeholder="`.col-${number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-${number}`"/>
               </CCol>
               <CCol :col="12 - number">
-                <CFormInput class="mb-0" :placeholder="`.col-${12 - number}`"/>
+                <CFormInput class="c-mb-0" :placeholder="`.col-${12 - number}`"/>
               </CCol>
             </CRow>
           </CCardBody>
@@ -676,13 +684,13 @@
             <CForm>
               <CFormInput
                 prependHtml="Username"
-                appendHtml="<i class='fa fa-user'></i>"
+                appendHtml="<i class='cui-user'></i>"
               />
               <CFormInput
                 prependHtml="Email"
                 type="email"
                 autocomplete="email"
-                appendHtml="<i class='fa fa-envelope'></i>"
+                appendHtml="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
                 prependHtml="Password"
@@ -690,8 +698,10 @@
                 autocomplete="current-password"
                 appendHtml="<i class='fa fa-asterisk'></i>"
               />
-              <div class="form-group form-actions">
-                <CButton type="submit" size="sm" variant="primary">Submit</CButton>
+              <div class="c-form-group c-form-actions">
+                <CButton type="submit" size="sm" variant="primary">
+                  Submit
+                </CButton>
               </div>
             </CForm>
           </CCardBody>
@@ -706,13 +716,13 @@
             <CForm>
               <CFormInput
                 placeholder="Username"
-                appendHtml="<i class='fa fa-user'></i>"
+                appendHtml="<i class='cui-user'></i>"
               />
               <CFormInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                appendHtml="<i class='fa fa-envelope'></i>"
+                appendHtml="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
                 placeholder="Password"
@@ -720,8 +730,10 @@
                 autocomplete="current-password"
                 appendHtml="<i class='fa fa-asterisk'></i>"
               />
-              <div class="form-group form-actions">
-                <CButton type="submit" class="btn btn-sm btn-secondary">Submit</CButton>
+              <div class="c-form-group c-form-actions">
+                <CButton type="submit" class="c-btn c-btn-sm c-btn-secondary">
+                  Submit
+                </CButton>
               </div>
             </CForm>
           </CCardBody>
@@ -736,13 +748,13 @@
             <CForm>
               <CFormInput
                 placeholder="Username"
-                prependHtml="<i class='fa fa-user'></i>"
+                prependHtml="<i class='cui-user'></i>"
               />
               <CFormInput
                 placeholder="Email"
                 type="email"
                 autocomplete="email"
-                prependHtml="<i class='fa fa-envelope'></i>"
+                prependHtml="<i class='cui-envelope-closed'></i>"
               />
               <CFormInput
                 placeholder="Password"
@@ -750,8 +762,10 @@
                 autocomplete="current-password"
                 prependHtml="<i class='fa fa-asterisk'></i>"
               />
-              <div class="form-group form-actions">
-                <CButton type="submit" size="sm" variant="success">Submit</CButton>
+              <div class="c-form-group c-form-actions">
+                <CButton type="submit" size="sm" variant="success">
+                  Submit
+                </CButton>
               </div>
             </CForm>
           </CCardBody>
@@ -763,19 +777,19 @@
         <transition name="fade">
           <CCard v-if="show">
             <CCardHeader>
-              <i class="fa fa-edit"></i> Form Elements
-              <div class="card-header-actions">
-                <CLink href="#" class="card-header-action btn-setting">
-                  <i class="icon-settings"></i>
+              <i class="cui-pencil"></i> Form Elements
+              <div class="c-card-header-actions">
+                <CLink href="#" class="c-card-header-action c-btn-setting">
+                  <i class="cui-settings"></i>
                 </CLink>
                 <CLink
-                  class="card-header-action btn-minimize"
+                  class="c-card-header-action c-btn-minimize"
                   @click="formCollapsed=!formCollapsed"
                 >
-                  <i :class="`icon-arrow-${formCollapsed ? 'down' : 'up'}`"></i>
+                  <i :class="`cui-chevron-${formCollapsed ? 'bottom' : 'top'}`"></i>
                 </CLink>
-                <CLink href="#" class="card-header-action btn-close" v-on:click="show = !show">
-                  <i class="icon-close"></i>
+                <CLink href="#" class="c-card-header-action c-btn-close" v-on:click="show = !show">
+                  <i class="cui-circle-x"></i>
                 </CLink>
               </div>
             </CCardHeader>
@@ -813,7 +827,7 @@
                     <CButton variant="danger">Options</CButton>
                   </template>
                 </CFormInput>
-                <div class="form-actions">
+                <div class="c-form-actions">
                   <CButton type="submit" variant="primary">Save changes</CButton>
                   <CButton variant="secondary">Cancel</CButton>
                 </div>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 8765b9bf..a1be8f71 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -20,11 +20,11 @@
             </CNavbarNav>
             <CNavbarNav class="ml-auto">
               <CDropdown right class="nav-item b-nav-dropdown" toggleClasses="nav-link">
-                <CDropdownItem><i class="fa fa-file" /> Projects
+                <CDropdownItem><i class="cui-file" /> Projects
                   <CBadge variant="primary">32</CBadge>
                 </CDropdownItem>
-                <CDropdownItem><i class="fa fa-shield" /> Lock Account</CDropdownItem>
-                <CDropdownItem><i class="fa fa-lock" /> Logout</CDropdownItem>
+                <CDropdownItem><i class="cui-shield" /> Lock Account</CDropdownItem>
+                <CDropdownItem><i class="cui-lock-locked" /> Logout</CDropdownItem>
               </CDropdown>
             </CNavbarNav>
           </CCollapse>
diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue
index 2efc0b7f..083fca15 100644
--- a/src/views/base/Navs.vue
+++ b/src/views/base/Navs.vue
@@ -31,7 +31,7 @@
         <CCardBody>
           <CNav>
             <CNavItem active>
-              <i class="icon-basket-loaded"></i>
+              <i class="cui-basket-loaded"></i>
             </CNavItem>
             <CNavItem>
               Link
diff --git a/src/views/base/Tabs.vue b/src/views/base/Tabs.vue
index 04a74fd2..f3fd3602 100644
--- a/src/views/base/Tabs.vue
+++ b/src/views/base/Tabs.vue
@@ -77,7 +77,7 @@
             <CTabs addTabClasses="c-mt-1">
               <CTab active>
                 <template slot="title">
-                  <i class="icon-calculator"></i>
+                  <i class="cui-calculator"></i>
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -87,7 +87,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-basket-loaded"></i>
+                  <i class="cui-basket-loaded"></i>
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -97,7 +97,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-pie-chart"></i>
+                  <i class="cui-pie-chart"></i>
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -118,7 +118,7 @@
             <CTabs addTabClasses="c-mt-1">
               <CTab active>
                 <template slot="title">
-                  <i class="icon-calculator"></i> {{tabs[0]}}
+                  <i class="cui-calculator"></i> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -128,7 +128,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-basket-loaded"></i> {{tabs[1]}}
+                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -138,7 +138,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-pie-chart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -159,7 +159,7 @@
             <CTabs pills vertical="4">
               <CTab active>
                 <template slot="title">
-                  <i class="icon-calculator"></i> {{tabs[0]}}
+                  <i class="cui-calculator"></i> {{tabs[0]}}
                 </template>
                 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -169,7 +169,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-basket-loaded"></i> {{tabs[1]}}
+                  <i class="cui-basket-loaded"></i> {{tabs[1]}}
                 </template>
                 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
@@ -179,7 +179,7 @@
               </CTab>
               <CTab>
                 <template slot="title">
-                  <i class="icon-pie-chart"></i> {{tabs[2]}}
+                  <i class="cui-pie-chart"></i> {{tabs[2]}}
                 </template>
                 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                 et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 7529d1cd..87294161 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -152,14 +152,14 @@
                   <CFormInput
                     class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
-                    prepend="$"
-                    append=".00"
+                    prependHtml="$"
+                    appendHtml=".00"
                     value="100"
                   />
                   <CFormSelect
                     class="c-mb-0 c-w-25 c-mx-1"
                     size="sm"
-                    prepend="Size"
+                    prependHtml="Size"
                     value="Medium"
                     :options="['Large','Medium','Small']"
                     custom
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index 2defcf00..0b406709 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -594,27 +594,27 @@
         <CRow class="c-align-items-center">
           <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="primary">
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Standard Button
+              <i class="cui-lightbulb"></i>&nbsp;Standard Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="secondary" outline>
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Outline Button
+              <i class="cui-lightbulb"></i>&nbsp;Outline Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="success">
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
+              <i class="cui-lightbulb"></i>&nbsp;Ghost Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="warning" square>
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Square Button
+              <i class="cui-lightbulb"></i>&nbsp;Square Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="c-text-center c-mt-3">
             <CButton variant="danger" pill>
-              <i class="fa fa-lightbulb-o"></i>&nbsp;Pill Button
+              <i class="cui-lightbulb"></i>&nbsp;Pill Button
             </CButton>
           </CCol>
         </CRow>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index ba71531a..a88cb16a 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -2,7 +2,7 @@
   <div class="c-animated c-fadeIn">
     <CCard >
       <CCardHeader>
-        <i class="fa fa-picture-o"></i>CoreUI Icons
+        <i class="cui-pencil"></i>CoreUI Icons
         <CBadge variant="info">New</CBadge>
         <div class="c-card-header-actions">
           <a
@@ -16,7 +16,15 @@
         </div>
       </CCardHeader>
       <CCardBody>
-        <CRow class="c-text-center">
+        <CRow class="c-text-center c-mb-5">
+          <template v-for="(name, key) in $options.iconNames">
+            <CCol :key="key" col="6" sm="4" md="3" xl="2" >
+              <CIcon :name="name" width="24" class="c-mt-4"/>
+              <div>{{name}}</div>
+            </CCol>
+          </template>
+        </CRow>
+        <CRow class="c-text-center ">
           <CCol col="6" sm="4" md="3" xl="2">
             <i class="cui-account-logout c-icons c-font-2xl c-d-block c-mt-4"></i>
             <div>account-logout</div>
@@ -423,7 +431,14 @@
   </div>
 </template>
 <script>
+import icons from '@coreui/icons'
+const iconNames = Object.keys(icons)
+
 export default {
-  name: 'CoreUIIcons'
+  name: 'CoreUIIcons',
+  iconNames,
+  mounted () {
+    console.log(this.$options.iconNames)
+  }
 }
 </script>
diff --git a/src/views/icons/Flags.vue b/src/views/icons/Flags.vue
index 91a98652..a51ff33c 100644
--- a/src/views/icons/Flags.vue
+++ b/src/views/icons/Flags.vue
@@ -2,7 +2,7 @@
   <div class="c-animated c-fadeIn">
     <CCard>
       <CCardHeader>
-        <i class="fa fa-font-awesome"></i> Flags
+        <i class="cui-globe"></i>Flags
       </CCardHeader>
       <CCardBody>
         <CRow class="c-text-center">
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 198c44cd..9ca24a8d 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -12,12 +12,12 @@
                 <h1>Login</h1>
                 <p class="text-muted">Sign In to your account</p>
                 <CFormInput
-                  prepend="<i class='icon-user'></i>"
+                  prependHtml="<i class='cui-user'></i>"
                   placeholder="Username"
                   autocomplete="username email"
                 />
                 <CFormInput
-                  prepend="<i class='icon-lock'></i>"
+                  prependHtml="<i class='cui-lock-locked'></i>"
                   placeholder="Password"
                   type="password"
                   autocomplete="curent-password"
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index 0efe1591..7f3d9ba1 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -10,7 +10,7 @@
           </div>
           <CFormInput
             class="c-mb-0"
-            prepend="<i class='fa fa-search'></i>"
+            prependHtml="<i class='cui-magnifying-glass'></i>"
             placeholder="What are you looking for?"
           >
             <template #append>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index cc72c761..fff5a3e2 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -10,7 +10,7 @@
           </div>
           <CFormInput
             class="c-mb-0"
-            prepend="<i class='fa fa-search'></i>"
+            prependHtml="<i class='cui-magnifying-glass'></i>"
             placeholder="What are you looking for?"
           >
             <template #append>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index deec2ab2..9ac624cb 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -10,24 +10,24 @@
                 <p class="c-text-muted">Create your account</p>
                 <CFormInput
                   placeholder="Username"
-                  prepend="<i class='icon-user'></i>"
+                  prependHtml="<i class='cui-user'></i>"
                   autocomplete="username"
                 />
                 <CFormInput
                   placeholder="Email"
-                  prepend="@"
+                  prependHtml="@"
                   autocomplete="email"
                 />
                 <CFormInput
                   placeholder="Password"
                   type="password"
-                  prepend="<i class='icon-lock'></i>"
+                  prependHtml="<i class='cui-lock-locked'></i>"
                   autocomplete="new-password"
                 />
                 <CFormInput
                   placeholder="Repeat password"
                   type="password"
-                  prepend="<i class='icon-lock'></i>"
+                  prependHtml="<i class='cui-lock-locked'></i>"
                   autocomplete="new-password"
                   class="c-mb-4"
                 />
diff --git a/src/views/theme/Colors.vue b/src/views/theme/Colors.vue
index a6452d51..3aa79895 100644
--- a/src/views/theme/Colors.vue
+++ b/src/views/theme/Colors.vue
@@ -2,7 +2,7 @@
   <div class="c-animated c-fadeIn">
     <CCard >
       <CCardHeader>
-        <i class="icon-drop"></i> Theme colors
+        <i class="cui-drop"></i> Theme colors
       </CCardHeader>
       <CCardBody>
         <CRow>
@@ -21,7 +21,7 @@
     </CCard>
     <CCard>
       <CCardHeader>
-        <i class="icon-drop"></i> Grays
+        <i class="cui-drop"></i> Grays
       </CCardHeader>
       <CCardBody>
         <CRow>
@@ -39,7 +39,7 @@
     </CCard>
     <CCard >
       <CCardHeader>
-        <i class="icon-drop"></i> Additional colors
+        <i class="cui-drop"></i> Additional colors
       </CCardHeader>
       <CCardBody>
         <CRow>
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index 7a792f42..c66c5097 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -7,7 +7,7 @@
             class="c-float-right"
             variant="transparent c-p-0"
             placement="bottom-end"
-            buttonHtml="<i class='icon-settings'></i>"
+            buttonHtml="<i class='cui-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -34,7 +34,7 @@
             variant="transparent c-p-0"
             placement="bottom-end"
             noCaret
-            buttonHtml="<i class='icon-location-pin'></i>"
+            buttonHtml="<i class='cui-location-pin'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -66,7 +66,7 @@
             class="c-float-right"
             variant="transparent c-p-0"
             placement="bottom-end"
-            buttonHtml="<i class='icon-settings'></i>"
+            buttonHtml="<i class='cui-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>
@@ -97,7 +97,7 @@
             class="c-float-right"
             variant="transparent c-p-0"
             placement="bottom-end"
-            buttonHtml="<i class='icon-settings'></i>"
+            buttonHtml="<i class='cui-settings'></i>"
           >
             <CDropdownItem>Action</CDropdownItem>
             <CDropdownItem>Another action</CDropdownItem>