diff --git a/app/assets/javascripts/helpers/avatar_helper.js b/app/assets/javascripts/helpers/avatar_helper.js
new file mode 100644
index 00000000000..d3b1d0f11fd
--- /dev/null
+++ b/app/assets/javascripts/helpers/avatar_helper.js
@@ -0,0 +1,33 @@
+import _ from 'underscore';
+import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
+
+export const DEFAULT_SIZE_CLASS = 's40';
+export const IDENTICON_BG_COUNT = 7;
+
+export function getIdenticonBackgroundClass(entityId) {
+ const type = (entityId % IDENTICON_BG_COUNT) + 1;
+ return `bg${type}`;
+}
+
+export function getIdenticonTitle(entityName) {
+ return getFirstCharacterCapitalized(entityName) || ' ';
+}
+
+export function renderIdenticon(entity, options = {}) {
+ const { sizeClass = DEFAULT_SIZE_CLASS } = options;
+
+ const bgClass = getIdenticonBackgroundClass(entity.id);
+ const title = getIdenticonTitle(entity.name);
+
+ return `
${_.escape(title)}
`;
+}
+
+export function renderAvatar(entity, options = {}) {
+ if (!entity.avatar_url) {
+ return renderIdenticon(entity, options);
+ }
+
+ const { sizeClass = DEFAULT_SIZE_CLASS } = options;
+
+ return `
`;
+}
diff --git a/app/assets/javascripts/lib/utils/text_utility.js b/app/assets/javascripts/lib/utils/text_utility.js
index 5f25c6ce1ae..2be3c97bd95 100644
--- a/app/assets/javascripts/lib/utils/text_utility.js
+++ b/app/assets/javascripts/lib/utils/text_utility.js
@@ -75,6 +75,20 @@ export function capitalizeFirstCharacter(text) {
return `${text[0].toUpperCase()}${text.slice(1)}`;
}
+/**
+ * Returns the first character capitalized
+ *
+ * If falsey, returns empty string.
+ *
+ * @param {String} text
+ * @return {String}
+ */
+export function getFirstCharacterCapitalized(text) {
+ return text
+ ? text.charAt(0).toUpperCase()
+ : '';
+}
+
/**
* Replaces all html tags from a string with the given replacement.
*
diff --git a/app/assets/javascripts/vue_shared/components/identicon.vue b/app/assets/javascripts/vue_shared/components/identicon.vue
index 4ffc811e714..0862f2c0cff 100644
--- a/app/assets/javascripts/vue_shared/components/identicon.vue
+++ b/app/assets/javascripts/vue_shared/components/identicon.vue
@@ -1,4 +1,6 @@