User Icons

User Icon with Image

Quickly style user avatars and icons with the user icon component. Wrap an image with <div class="user-icon"> to give it round borders.

user-icon

<div class="user-icon">
    <img alt="thumbnail" class="img-responsive" src="../../images/thumbnail_placeholder.gif">
</div>

User Icon with Text

If no image is supplied, insert placeholder text or an icon instead.

user-icon
user-icon-default

user-icon
user-icon-primary

user-icon
user-icon-success

user-icon
user-icon-info

user-icon
user-icon-warning

user-icon
user-icon-danger

<div class="user-icon user-icon-default"><span>JB</span></div>
<div class="user-icon user-icon-primary"><span>SP</span></div>
<div class="user-icon user-icon-success"><span>TT</span></div>
<div class="user-icon user-icon-info"><span>WW</span></div>
<div class="user-icon user-icon-warning"><span>JB</span></div>
<div class="user-icon user-icon-danger"><span>JB</span></div>

User Icon Helper Classes

Add class .user-icon-circle, .user-icon-rounded, or .user-icon-square to style the borders.

user-icon-circle

user-icon-rounded

user-icon-square

<div class="user-icon user-icon-circle">
    <img alt="thumbnail" class="img-responsive" src="../../images/thumbnail_placeholder.gif">
</div>

<div class="user-icon user-icon-rounded">
    <img alt="thumbnail" class="img-responsive" src="../../images/thumbnail_placeholder.gif">
</div>

<div class="user-icon user-icon-square">
    <img alt="thumbnail" class="img-responsive" src="../../images/thumbnail_placeholder.gif">
</div>

Add it on the parent container to style everything inside.

user-icon
user-icon-default

user-icon
user-icon-primary

user-icon
user-icon-success

user-icon
user-icon-info

user-icon
user-icon-warning

user-icon
user-icon-danger

<div class="user-icon-square">
    <div class="user-icon user-icon-default"><span>JB</span></div>
    <div class="user-icon user-icon-primary"><span>SP</span></div>
    <div class="user-icon user-icon-success"><span>TT</span></div>
    <div class="user-icon user-icon-info"><span>WW</span></div>
    <div class="user-icon user-icon-warning"><span>JB</span></div>
    <div class="user-icon user-icon-danger"><span>JB</span></div>
</div>

User Icon Sizes

Use .user-icon-xs, .user-icon-sm, .user-icon-lg, .user-icon-xl, and .user-icon-xxl to size the user icon component.

user-icon
user-icon-xs

user-icon
user-icon-sm

user-icon

user-icon
user-icon-lg

user-icon
user-icon-xl

user-icon
user-icon-xxl

<div class="user-icon user-icon-xs"><span>JB</span></div>
<div class="user-icon user-icon-sm"><span>SP</span></div>
<div class="user-icon"><span>TT</span></div>
<div class="user-icon user-icon-lg"><span>TT</span></div>
<div class="user-icon user-icon-xl"><span>TT</span></div>
<div class="user-icon user-icon-xxl"><span>TT</span></div>