diff --git a/scss/_variables.scss b/scss/_variables.scss
index 2eb04537..52be731e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -722,9 +722,6 @@ $Form-selectValue-borderColor: saturate(
   2.5%
 ) !default;
 $Form-selectValue-fontSize: $fontSizeSm !default;
-$Form-select-caret-vender: 'FontAwesome' !default;
-$Form-select-caret-icon: '\f0d7' !default;
-$Form-select-caret-fontSize: $fontSizeBase !default;
 $Form-select-caret-iconColor: $icon-color !default;
 $Form-select-caret-onHover-iconColor: $icon-onHover-color !default;
 $Form-select-outer-borderWidth: px2rem(1px) !default;
@@ -1384,9 +1381,6 @@ $Panel-fixedBottom-borderTop: none !default;
 $Pagination-height: px2rem(30px) !default;
 $Pagination-minWidth: px2rem(30px) !default;
 $Pagination-padding: 0 px2rem(8px) !default;
-$Pagination-arrowVendor: 'FontAwesome' !default;
-$Pagination-prevArrowContent: '\f053' !default;
-$Pagination-nextArrowContent: '\f054' !default;
 $Pagination-fontSize: $fontSizeBase !default;
 $Pagination-onActive-backgroundColor: $primary !default;
 $Pagination-onActive-color: $white !default;
diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
index 4b6443d6..d95b012e 100644
--- a/scss/components/_pagination.scss
+++ b/scss/components/_pagination.scss
@@ -63,18 +63,9 @@
     }
   }
 
-  &-prev,
-  &-next {
-    font-family: $Pagination-arrowVendor;
-  }
-
   &-prev {
     > span {
       cursor: pointer;
-
-      &::before {
-        content: $Pagination-prevArrowContent;
-      }
     }
   }
 
@@ -88,10 +79,6 @@
   &-next {
     > span {
       cursor: pointer;
-
-      &::before {
-        content: $Pagination-nextArrowContent;
-      }
     }
   }
 
diff --git a/scss/components/form/_select.scss b/scss/components/form/_select.scss
index e4a63166..dcd90b5b 100644
--- a/scss/components/form/_select.scss
+++ b/scss/components/form/_select.scss
@@ -121,17 +121,16 @@
     justify-content: center;
     line-height: 1;
 
-    &:before {
+    > svg {
       transition: transform 0.3s;
-      content: $Form-select-caret-icon;
-      font-family: $Form-select-caret-vender;
-      font-size: $Form-select-caret-fontSize;
       display: inline-block;
       color: $Form-select-caret-iconColor;
+      width: 10px;
+      height: 10px;
     }
   }
 
-  &.is-opened &-arrow:before {
+  &.is-opened &-arrow > svg {
     transform: rotate(180deg);
   }
 
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 4b8ad104..4ffd2237 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -933,7 +933,9 @@ export class Select extends React.Component<SelectProps, SelectState> {
                 />
               ) : null}
 
-              <span className={cx('Select-arrow')} />
+              <span className={cx('Select-arrow')}>
+                <Icon icon="caret" className="icon" />
+              </span>
               {isOpen ? this.renderOuter(options) : null}
             </div>
           );
diff --git a/src/renderers/Pagination.tsx b/src/renderers/Pagination.tsx
index e3a34806..4cc09648 100644
--- a/src/renderers/Pagination.tsx
+++ b/src/renderers/Pagination.tsx
@@ -195,7 +195,7 @@ export default class Pagination extends React.Component<
     pageButtons.unshift(
       <li
         className={cx('Pagination-prev', {
-          disabled: activePage === 1
+          'is-disabled': activePage === 1
         })}
         onClick={
           activePage === 1
@@ -204,14 +204,16 @@ export default class Pagination extends React.Component<
         }
         key="prev"
       >
-        <span />
+        <span>
+          <Icon icon="left-arrow" className="icon" />
+        </span>
       </li>
     );
 
     pageButtons.push(
       <li
         className={cx('Pagination-next', {
-          disabled: activePage === items
+          'is-disabled': activePage === items
         })}
         onClick={
           activePage === items
@@ -220,7 +222,9 @@ export default class Pagination extends React.Component<
         }
         key="next"
       >
-        <span />
+        <span>
+          <Icon icon="right-arrow" className="icon" />
+        </span>
       </li>
     );