# Avatar Size and Shape
**URL:** https://meta.discourse.org/t/avatar-size-and-shape/106124
**Category:** Theme component
**Tags:** official, avatar-size-shape
**Created:** [January 9, 2019, 10:37pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124 "2019-01-09T22:37:14Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [January 9, 2019, 10:37pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/1 "2019-01-09T22:37:15Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Avatar Size and Shape** will allow you to easily change the size and shape of the avatars on your site. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/avatar-size-and-shape) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-avatar-component](https://github.com/discourse/discourse-avatar-component) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. 👍
>
> [❓ **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=avatar-size-shape "Ask for support on configuring and using Avatar Size and Shape") [🐛 **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=avatar-size-shape "A bug report means something is broken, preventing normal/typical use of the theme component") [👀 **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=avatar-size-shape "Discussion about the user interface of Avatar Size and Shape, and how features are presented (including language and UI elements)") [💡 **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=avatar-size-shape "Discussion about how existing Avatar Size and Shape features can be improved or enhanced, and how proposed new features could work")
### Features
**Avatar Size and Shape** allows you to easily customise the size and shape of avatars on your site in a variety of different locations.
### Settings
| Name | Description |
| --- | --- |
| latest avatar size | Choose the avatar size on latest. Default value is small (25px). To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R. |
| topic avatars size | Choose the avatar size on topics. Default value is 45px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R. |
| header avatars size | Choose the avatar size on header. Default value is 32px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R. |
| header height | Choose the height of the header. The choice must be made based on the header\_avatars\_size + 10px. For example, if the header\_avatars\_size is set to 90px, the header should be 100px. Default value is 60px. |
| margin top | Choose the distance in px from the header. Default value is 0px. |
| avatars border radius | Choose the border-radius of the avatars on the site. The setting will be applied to all avatars, including the one on the header and the one on the user-card. 0% corresponds to a square shape, 50% to a rounded shape. Default value at 50% |
| mobile avatars size | Choose the avatar size on topics on Mobile. Min value is 45px (default), max value is 80px. To see the changes applied, refresh the page with ctrl+F5 or cmd+shift+R. |
#### Extra details:
- `latest avatar size` changes the avatar size on the `/latest` page. All the avatars will be visible up to the `medium` size. From `large` onwards, only the avatar of the last user who wrote on the topic will be displayed.
- `header avatar size` works well up to the 60px size. For avatars of a larger size, the height of the header must be increased (`header height`) and consequently, the margin-top that distances the header from the other elements of the page must also increase (`margin top`).
The position (in height) of the notification bubble (topics and PMs) has remained unchanged. These bubbles will only move horizontally following the avatar size.
### Development History
This theme component was written taking inspiration from the guides
- [How to increase avatars size on posts without making them blurred](https://meta.discourse.org/t/how-to-increase-avatars-size-on-posts-without-making-them-blurred/82214)
- [https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606](https://meta.discourse.org/t/how-to-increase-avatars-size-on-latest-without-making-them-blurred/89606)
- [How to increase Header avatar size?](https://meta.discourse.org/t/how-to-increase-header-avatar-size/46719)
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @JammyDodger 2024-06-11T08:14:10Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [March 9, 2019, 3:16am UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/3 "2019-03-09T03:16:46Z")
How would I go about changing the size of the topic avatar on mobile with this? 80px looks pretty good on desktop, but obnoxious on mobile. I tried changing .topic-avatar width but it just shifts the text and the avatar stays the same.
---
### Author:  [@ariznaf](https://meta.discourse.org/u/ariznaf)
#### Post date: [October 12, 2019, 9:24pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/4 "2019-10-12T21:24:32Z")
Great component, we were looking for it.
But it would be great to change the avatar flair size too, if you are using them in your site (as we do).
Thank you.
---
### Author:  [@orchardstreet](https://meta.discourse.org/u/orchardstreet)
#### Post date: [December 31, 2019, 4:15pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/5 "2019-12-31T16:15:02Z")
very cool
wish I could set the topic avatar size to 53 though ☹
Also does this apply to avatars in the topic-poster div found on some front page category arrangments? It doesn’t seem to but it would be cool if it did.
---
### Author:  [@zuker](https://meta.discourse.org/u/zuker)
#### Post date: [January 19, 2020, 11:04pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/6 "2020-01-19T23:04:38Z")
> [@ariznaf](#):
>
> Great component, we were looking for it.
>
> But it would be great to change the avatar flair size too, if you are using them in your site (as we do).
>
> Thank you.
Did you found a way of doing this?
---
### Author:  [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [March 30, 2020, 10:10am UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/7 "2020-03-30T10:10:19Z")
@dax I found a small issue which collides with the Quick Messages plugin.
The following CSS comes targets the badge notification of the quick messages plugin as well:
```css
.d-header-icons .unread-private-messages {
right: auto;
left: -10%; /* <--- this is the culprit*/
}
```
May be add some #… element to the CSS selector
---
### Author:  [@Joshua\_Kogan](https://meta.discourse.org/u/Joshua_Kogan)
#### Post date: [March 30, 2020, 12:03pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/8 "2020-03-30T12:03:29Z")
Did you find a solution for the mobile version?
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [March 30, 2020, 6:11pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/9 "2020-03-30T18:11:21Z")
No, never found a way to do it unfortunately.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [March 30, 2020, 11:24pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/10 "2020-03-30T23:24:26Z")
> [@davidkingham](#):
>
> How would I go about changing the size of the topic avatar on mobile with this?
I will take a look this week if I have time
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [April 2, 2020, 1:11pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/12 "2020-04-02T13:11:17Z")
> [@davidkingham](#):
>
> How would I go about changing the size of the topic avatar on mobile with this?
> [@zuker](#):
>
> Did you found a way of doing this?
There is a new setting to configure the size on mobile from 45px (default) to 80px.
Update the component to see the new setting.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [April 3, 2020, 3:48pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/13 "2020-04-03T15:48:49Z")
Thank you Daniela, I have one more suggestion. It would be great if there was an option to either leave the reply avatars on for large or extra\_large so I can reduce the size via css. Or an option to reduce the size of the reply avatars in the plugin. I’m trying to achieve this, but of course the larger avatar is blurry from upsizing the medium size avatar.
---
### Author:  [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [April 6, 2020, 11:52pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/14 "2020-04-06T23:52:08Z")
Great plugin! Thank you!
@Dax Only problem I’m seeing right now is in the header which is a darker color. The hover is set to white which works fine on the search button and on the hamburger menu, but when the avatar is set to a slightly larger size, the size of the hover is smaller than the avatar. How would I go about fixing that?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [April 9, 2020, 9:59am UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/15 "2020-04-09T09:59:06Z")
This component does not change the colors of the site in any way, it must be some other theme that you are using to overwrite the background colors.
---
### Author:  [@ariznaf](https://meta.discourse.org/u/ariznaf)
#### Post date: [April 9, 2020, 10:21am UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/16 "2020-04-09T10:21:34Z")
Great component.
It makes it easy to control the size and aspecto of your avatar without changing CSS of you theme (that may give problems upgrading the theme).
No, there is no change in colors.
We are using it and are happy with it.
---
### Author:  [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [April 9, 2020, 11:53am UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/17 "2020-04-09T11:53:51Z")
@dax Maybe I did not explain myself very well. It’s not about the color, it’s about the size of the container. If you hover over your own avatar icon in the upper right corner of the page here on meta, you get a colored square with a :hover property, and the square is bigger than the avatar.
However, if I enlarge the avatar with this plugin, the size of the :hover square is now smaller than the avatar and looks a little wonky.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [April 9, 2020, 12:40pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/18 "2020-04-09T12:40:56Z")
By changing the height of that div, the other two icons must also be repositioned. For this reason I had preferred not to. For now I only make the color of the div on hover transparent.
[https://github.com/discourse/discourse-avatar-component/commit/9715ce5077c542863499d00bf1820e3f873bf49b](https://github.com/discourse/discourse-avatar-component/commit/9715ce5077c542863499d00bf1820e3f873bf49b)
---
### Author:  [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [April 9, 2020, 12:56pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/19 "2020-04-09T12:56:07Z")
Would it not be possible to simply target
```
.header-dropdown-toggle #current-user
```
with CSS?
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [April 9, 2020, 3:50pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/20 "2020-04-09T15:50:55Z")
No, it’s not so simple.
I will take a look in the next hours
---
### Author:  [@Denis\_Heraud](https://meta.discourse.org/u/Denis_Heraud)
#### Post date: [April 9, 2020, 10:43pm UTC](https://meta.discourse.org/t/avatar-size-and-shape/106124/21 "2020-04-09T22:43:26Z")
I’m trying to achieve this in CSS but since all header icons use the same class:
```