1import Avatar from '@mui/material/Avatar';
 2import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 3import {useTheme} from '@mui/material/styles';
 4import useProfile from '../../hooks/useProfile';
 5
 6const UserIcon = () => {
 7  const {profile} = useProfile();
 8  const theme = useTheme();
 9
10  if (profile)
11    return (
12      <Avatar
13        sx={{width: theme.spacing(3), height: theme.spacing(3), fontSize: 16}}
14      >
15        {`${profile.username[0]}`.toUpperCase()}
16      </Avatar>
17    );
18  else return <AccountCircleOutlinedIcon />;
19};
20
21export default UserIcon;