# Avatar Size and Shape **URL:** \ **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:** 1\ **Showing post:** 1
**Author:** ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@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. ![avatar size and shape example](https://global.discourse-cdn.com/meta/original/4X/a/7/f/a7fb8a1c0d0eec8f8680b1fd9603ee9e9e815b23.png) ### 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: --- _[View the full topic](https://meta.discourse.org/t/avatar-size-and-shape/106124)._