---
title: React Avatar Component Styling
name: Avatar Styling
description: Learn how to customize the React Avatar component with CSS classes, variables, and SASS for flexible styling and seamless integration into your design.
route: /components/avatar/
---

### CSS variables

React Avatar supports CSS variables for easy customization. These variables are set via SASS but allow direct overrides in your stylesheets or inline styles.

<ScssDocs file="_avatar.scss" capture="avatar-css-vars" />

#### How to use CSS variables

```jsx
const customVars = {
  '--cui-avatar-font-size': '1rem',
  '--cui-avatar-status-width': '0.125rem',
}

return <CAvatar style={customVars} />
```

### SASS variables

<ScssDocs file="_variables.scss" capture="avatar-variables" />
