# Shape > A tinted, rounded square that holds one icon, for feature lists and other places where an icon needs a background. Put an icon on a soft, tinted background with the shape component. Pick a size and a color, or set the corner radius with a CSS variable. Source: https://docs.tabler.io/ui/components/shape --- ## Default markup A shape is a `.shape` element with one icon inside. It is a square with soft corners, filled with a light tint of the primary color. The icon takes the stronger primary color. The square is the same size as an [avatar](/ui/components/avatar), so the two line up in a list. ```html ``` ## Sizes Add `.shape-{size}` to change the size. The sizes are the avatar sizes, from `xxs` to `2xl`. The icon grows with the square. ```html

``` ## Colors Add `.shape-{color}` to use another palette color. The square takes the light tint of the color and the icon takes the full color. ```html

``` ## Corner radius The corners are rounded by `35%` of the size. Set `--tblr-shape-border-radius` on the shape to change this: `50%` makes a circle, `0` makes a sharp square. ```html

``` ## In a feature list Shapes mark the items of a feature list. Put one above or next to each heading, with the same size and color on every item. ```html

Mobile-optimized

Every page works on any screen size.

Tested email clients

Checked in more than 90 email clients.

Minimal design

Clean layouts based on Bootstrap.

``` ## Accessibility - A shape is decoration. The icon inside renders with `aria-hidden="true"`, so the shape adds nothing to the accessibility tree. - Put the meaning in the text next to the shape, not in the icon or the color.