image as rank name


Hi, can I use image as my rank name or display my rank icons at the end of my rank name?

Message 1 of 9
Community Management

Yes you can, this is an out the box feature of the platform. When editing your Rank within admin look for the below option and add the icon URL to display for the given rank, this is then by default displayed next to the username/rank. 








My latest Ideas: Vanity URL Manager l @mention Roles l  LSW Password Policy

Message 2 of 9

Hi @Fellsteruk, have tried this but the icon will only be displayed after the username with the configuration you provided as shown below. 

I prefer the rank icon to be displayed after the rank name (New-in-Town), please advise how it can be done?

rank icon test.png


Message 3 of 9
Community Management



Just use the next field on the list - Display an icon to the right of the user's name




Message 4 of 9

Hi @JasonHill@, I've already configured - Display an icon to the right of the user's name 
rank icon test2.png

I want the rank icon to be displayed to right of the RANK name, not the user's name. Is there a way to do it?

Message 5 of 9
Community Management

Ah sorry @mandychin. I suspect you would need some CSS trickery to achieve that. 


Good luck,




Message 6 of 9

thanks @JasonHill

Message 7 of 9
Community Management

This is fun. Thanks for giving this inspiration, @mandychin: You can actually enter HTML in the rank name and either append an <img> to your rank name text or replace it. The result is exactly what you asked for to show an icon after/instead of the rank name.

See this example I set up on a test instance (top is the author box next to a message, below the admin setting):

Rank_name_with_image.pngRank containing image

Some things to keep in mind with this approach:

  • Rank name field is limited to 80 characters, so you should pick the shortest possible image path. Using community assets like in my example is a good way.
  • Images are not very accessible out of the box unless you add accessibility descriptions
  • Images - as opposed to text - need to be treated differently (via height and width styling) to be made work on a responsive design. The built in cropping for text won't work for them.

Learn how to master Lithium. Visit the Best Practice Center

Previously known as Claudius. New profile - Now even more content
If you appreciate my efforts, please give me a kudo ↓
Accept as solution to help others find it faster.
Message 8 of 9

Hi @ClaudiusH this is exactly what I wanted! Thank you so much Smiley Very Happy

Message 9 of 9