diff --git a/src/system/components/data-display/Avatar/Avatar.vue b/src/system/components/data-display/Avatar/Avatar.vue
index 994780f50..4a4b42e94 100644
--- a/src/system/components/data-display/Avatar/Avatar.vue
+++ b/src/system/components/data-display/Avatar/Avatar.vue
@@ -29,6 +29,9 @@
 
 <script>
 import helpers from './lib/helpers.js'
+import { tokens } from '@@/tokens'
+import camelCase from 'lodash/camelCase'
+import upperFirst from 'lodash/upperFirst'
 
 export default {
   name: 'DsAvatar',
@@ -59,7 +62,7 @@ export default {
       return !this.name || this.name.toLowerCase() === 'anonymus'
     },
     styles() {
-      let size = this.size
+      let size = this.sizeValue
       if (Number.isInteger(Number(size))) {
         size = `${size}px`
       }
@@ -73,6 +76,9 @@ export default {
         color: this.fontColor
       }
     },
+    sizeValue() {
+      return tokens[`sizeAvatar${upperFirst(camelCase(this.size))}`]
+    },
     hasImage() {
       return Boolean(this.image) && !this.error
     },