diff --git a/dist/vue-aui-jira-extras.esm.js b/dist/vue-aui-jira-extras.esm.js
index 0654be5..d04a818 100644
--- a/dist/vue-aui-jira-extras.esm.js
+++ b/dist/vue-aui-jira-extras.esm.js
@@ -4671,9 +4671,9 @@ var UserPickerUserKey = { render: function render() {
         var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('va-select2', { ref: "select", attrs: { "allow-clear": _vm.allowClear, "disabled": _vm.disabled, "init-selection": _vm.initialValue, "locked": _vm.locked, "multiple": _vm.multiple, "placeholder": _vm.placeholder, "query": _vm.queryValues, "value": _vm.value, "separator": _vm.separator }, on: { "input": function input($event) {
                     _vm.onValueChanged($event);
                 } }, scopedSlots: _vm._u([{ key: "formatSelection", fn: function fn(option) {
-                    return _c('span', {}, [option.data.avatarUrls ? _c('aui-avatar', { attrs: { "squared": "", "size": "xsmall", "src": option.data.avatarUrls['48x48'] } }) : _vm._e(), _vm._v(" " + _vm._s(option.data.displayName) + " ")], 1);
+                    return _c('span', {}, [option.data.avatarUrls ? _c('span', { staticClass: "aui-avatar aui-avatar-xsmall aui-avatar-squared" }, [_c('span', { staticClass: "aui-avatar-inner" }, [_c('img', { attrs: { "src": option.data.avatarUrls['48x48'] } })])]) : _vm._e(), _vm._v(" " + _vm._s(option.data.displayName) + " ")]);
                 } }, { key: "formatResult", fn: function fn(option) {
-                    return _c('span', { staticClass: "result-user" }, [option.data.avatarUrls ? _c('aui-avatar', { staticClass: "result-user-avatar", attrs: { "size": "medium", "src": option.data.avatarUrls['48x48'] } }) : option.data.avatarUrl ? _c('aui-avatar', { staticClass: "result-user-avatar", attrs: { "size": "medium", "src": option.data.avatarUrl } }) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "result-user-text" }, [_c('span', { staticClass: "result-user-fullname" }, [_vm._v(_vm._s(option.data.displayName))]), _vm._v(" "), _c('span', { staticClass: "result-user-name" }, [_vm._v(_vm._s('' + (!option.data.isGroup ? '@' : '') + option.data.name))])])], 1);
+                    return _c('span', { staticClass: "result-user" }, [option.data.avatarUrls ? _c('span', { staticClass: "aui-avatar aui-avatar-medium" }, [_c('span', { staticClass: "aui-avatar-inner" }, [_c('img', { attrs: { "src": option.data.avatarUrls['48x48'] } })])]) : option.data.avatarUrl ? _c('span', { staticClass: "aui-avatar aui-avatar-medium" }, [_c('span', { staticClass: "aui-avatar-inner" }, [_c('img', { attrs: { "src": option.data.avatarUrl } })])]) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "result-user-text" }, [_c('span', { staticClass: "result-user-fullname" }, [_vm._v(_vm._s(option.data.displayName))]), _vm._v(" "), _c('span', { staticClass: "result-user-name" }, [_vm._v(_vm._s('' + (!option.data.isGroup ? '@' : '') + option.data.name))])])]);
                 } }]) });
     }, staticRenderFns: [], _scopeId: 'data-v-7bd2a69b',
     props: {
diff --git a/dist/vue-aui-jira-extras.js b/dist/vue-aui-jira-extras.js
index a31b873..ea2c73a 100644
--- a/dist/vue-aui-jira-extras.js
+++ b/dist/vue-aui-jira-extras.js
@@ -4675,9 +4675,9 @@ var UserPickerUserKey = { render: function render() {
         var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('va-select2', { ref: "select", attrs: { "allow-clear": _vm.allowClear, "disabled": _vm.disabled, "init-selection": _vm.initialValue, "locked": _vm.locked, "multiple": _vm.multiple, "placeholder": _vm.placeholder, "query": _vm.queryValues, "value": _vm.value, "separator": _vm.separator }, on: { "input": function input($event) {
                     _vm.onValueChanged($event);
                 } }, scopedSlots: _vm._u([{ key: "formatSelection", fn: function fn(option) {
-                    return _c('span', {}, [option.data.avatarUrls ? _c('aui-avatar', { attrs: { "squared": "", "size": "xsmall", "src": option.data.avatarUrls['48x48'] } }) : _vm._e(), _vm._v(" " + _vm._s(option.data.displayName) + " ")], 1);
+                    return _c('span', {}, [option.data.avatarUrls ? _c('span', { staticClass: "aui-avatar aui-avatar-xsmall aui-avatar-squared" }, [_c('span', { staticClass: "aui-avatar-inner" }, [_c('img', { attrs: { "src": option.data.avatarUrls['48x48'] } })])]) : _vm._e(), _vm._v(" " + _vm._s(option.data.displayName) + " ")]);
                 } }, { key: "formatResult", fn: function fn(option) {
-                    return _c('span', { staticClass: "result-user" }, [option.data.avatarUrls ? _c('aui-avatar', { staticClass: "result-user-avatar", attrs: { "size": "medium", "src": option.data.avatarUrls['48x48'] } }) : option.data.avatarUrl ? _c('aui-avatar', { staticClass: "result-user-avatar", attrs: { "size": "medium", "src": option.data.avatarUrl } }) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "result-user-text" }, [_c('span', { staticClass: "result-user-fullname" }, [_vm._v(_vm._s(option.data.displayName))]), _vm._v(" "), _c('span', { staticClass: "result-user-name" }, [_vm._v(_vm._s('' + (!option.data.isGroup ? '@' : '') + option.data.name))])])], 1);
+                    return _c('span', { staticClass: "result-user" }, [option.data.avatarUrls ? _c('span', { staticClass: "aui-avatar aui-avatar-medium" }, [_c('span', { staticClass: "aui-avatar-inner" }, [_c('img', { attrs: { "src": option.data.avatarUrls['48x48'] } })])]) : option.data.avatarUrl ? _c('span', { staticClass: "aui-avatar aui-avatar-medium" }, [_c('span', { staticClass: "aui-avatar-inner" }, [_c('img', { attrs: { "src": option.data.avatarUrl } })])]) : _vm._e(), _vm._v(" "), _c('div', { staticClass: "result-user-text" }, [_c('span', { staticClass: "result-user-fullname" }, [_vm._v(_vm._s(option.data.displayName))]), _vm._v(" "), _c('span', { staticClass: "result-user-name" }, [_vm._v(_vm._s('' + (!option.data.isGroup ? '@' : '') + option.data.name))])])]);
                 } }]) });
     }, staticRenderFns: [], _scopeId: 'data-v-7bd2a69b',
     props: {
diff --git a/src/components/UserPickerUserKey.vue b/src/components/UserPickerUserKey.vue
index 8eb1125..bd8cc8e 100644
--- a/src/components/UserPickerUserKey.vue
+++ b/src/components/UserPickerUserKey.vue
@@ -12,14 +12,18 @@
                 @input="onValueChanged($event)"
     >
         <span slot="formatSelection" slot-scope="option">
-            <aui-avatar v-if="option.data.avatarUrls" squared size="xsmall" :src="option.data.avatarUrls['48x48']"/>
+              <span v-if="option.data.avatarUrls" class="aui-avatar aui-avatar-xsmall aui-avatar-squared">
+                <span class="aui-avatar-inner"><img :src="option.data.avatarUrls['48x48']"></span>
+              </span>
             {{option.data.displayName}}
         </span>
         <span slot="formatResult" slot-scope="option" class="result-user">
-            <aui-avatar v-if="option.data.avatarUrls" size="medium" :src="option.data.avatarUrls['48x48']"
-                        class="result-user-avatar"/>
-            <aui-avatar v-else-if="option.data.avatarUrl" size="medium" :src="option.data.avatarUrl"
-                        class="result-user-avatar"/>
+              <span v-if="option.data.avatarUrls" class="aui-avatar aui-avatar-medium">
+                <span class="aui-avatar-inner"><img :src="option.data.avatarUrls['48x48']"></span>
+              </span>
+              <span v-else-if="option.data.avatarUrl" class="aui-avatar aui-avatar-medium">
+                <span class="aui-avatar-inner"><img :src="option.data.avatarUrl"></span>
+              </span>
             <div class="result-user-text">
                 <span class="result-user-fullname">{{option.data.displayName}}</span>
                 <span class="result-user-name">{{`${!option.data.isGroup ? '@' :''}${option.data.name}`}}</span>