On this page
Overview
Show code, SignInWithLogo.tsx
The application's logo beside its name.
Show code, AppLogo.tsx
Variants
- Icon
An icon or a logo in a button, a menu, navigation or a list row: its slot's icon. The default.
- Small
The application's logo in a top bar, beside a small avatar.
- Medium
A logo beside a name in a list or a card, as large as an avatar there.
- Large
A logo beside a name with a second line, such as an account header.
- Extra large
The largest, such as on a sign-in screen or a profile page.
Show code, Sizes.tsx
In a line of text
A graphic in a sentence or a heading takes the size of its text and sits on the line as an icon does.
Show code, InText.tsx
Filling its box
A graphic can fill a box of the layout's own, such as an empty state's picture area, contained in it whatever the box's shape.
Show code, FillBox.tsx
Photos and screenshots
A photo or a screenshot can cover a box of its own shape instead, cropped at its edges rather than shown whole with space beside it.
- Give the box the shape of the pictures it shows, such as wide for screenshots.
- Keep logos and icons whole: crop only a picture whose edges can go.
A photo covering a box of its own shape, at full width and as a list row's thumbnail.
Show code, PhotoThumbnails.tsx
Colors
A graphic keeps its own colors. A one-color mark or icon can take the color of the text around it instead, so it follows the theme and the button it sits in.
Show code, Colors.tsx
- Its own
A logo in its brand colors, a picture or an illustration. The default.
- Text color
A one-color mark or icon that should read as an icon among envUI's.
Behaviour
Box size
A graphic's box is one of envUI's sizes, and the picture is contained and centered in it, never stretched or cut.
- A file of any size, or an SVG that writes its own width and height, shows at the size chosen.
- A file wider or taller than square keeps its shape, centered in the square.
In icon slots
Every place that takes an icon, such as a button, a menu item, navigation or a list row, sizes and centers whatever it is given.
- A graphic there takes the slot's icon size, the same as envUI's icons beside it.
Show code, OwnIcons.tsx
Show code, ListIcons.tsx
Rules
Trim a file to its drawing once, when it joins the application, so its box holds the drawing and no empty space.
Use it when
- The application's or a company's logo, such as beside the application's name or in a sign-in button
- An icon of the application's own, where envUI has none for it
- A picture from a file, such as an empty state's illustration, a photo or a screenshot's thumbnail
Show code, TrimmedLogo.tsx
Show code, PaddedLogo.tsx
Icons
Use one of envUI's icons wherever one fits, and a graphic only for what is the application's own, such as its logo or an icon of a feature only it has.
Sizes
Choose a size of the place, not of the file: the slot's icon, or the size of the avatars around it.
- Leave a margin off a graphic: empty space around the drawing belongs trimmed from the file.
Words to use
- Our logo
The application's or a company's logo, at one of envUI's sizes.
- Our own icon
An icon envUI doesn't have, beside envUI's own.
- A photo or a thumbnail
A photo or a screenshot that covers a box of its shape.
- As large as an avatar
A logo the size of the avatars or the text around it.
- In the text color
A one-color mark that follows the theme and the button it is in.
- Trim the logo
A file with empty space around its drawing.