Liferay.Design / Lexicon-1
/
Get StartedNews
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

User icons

Sign In

User icons are used to visually identify users in the system.

Usage

Use a user icon to identify a user inside a context. User icons in Lexicon are always displayed inside a circle.

Size

all 6 user icons sizes

SizeUsage
Extra small22px. Use it in timelines and cards as identifier. Use it when you need to include many users.
Small30px. Use it in timelines and cards as identifier.
Default32px. The most common usage.
Large45px. Use it in user centered contexts as user cards.
Extra large64px. Use it in user centered contexts as user cards.
Extra estra large128px. Use it in user centered contexts as user cards.

Types

User icon with image

User images help to personalize the interface. In case you have your user image and can make use of it, use this type of user icon.

all 6 user icons sizes with image

User icon with text

Sometimes you won’t have the user image or won’t be allowed to use it. In those cases use this pattern. The text must be always in capital letters and a maximum of 2 letters. Use first letter from Name and Surname (NS).

all 6 user icons sizes with text

Something to improve? Report an issue!
Menu