diff --git a/client/src/components/MessageList.js b/client/src/components/MessageList.js
index d856c17..4841ea1 100644
--- a/client/src/components/MessageList.js
+++ b/client/src/components/MessageList.js
@@ -1,7 +1,7 @@
-import { Avatar, Box, Divider, Typography } from '@material-ui/core'
-import React from 'react'
 import Message from './Message'
-import PersonIcon from '@material-ui/icons/PersonRounded'
+import React from 'react'
+import { Avatar, Box, Divider, Typography } from '@material-ui/core'
+import { PersonRounded } from '@material-ui/icons'
 
 export default function MessageList(props) {
     const displayName = props.conversation.getDisplayName()
@@ -10,7 +10,7 @@
         <div className="message-list">
             <Box>
                 <Box style={{ display: 'inline-block', margin: 16, verticalAlign: 'middle' }}>
-                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonIcon />}</Avatar>
+                    <Avatar>{displayName ? displayName[0].toUpperCase() : <PersonRounded />}</Avatar>
                 </Box>
                 <Box style={{ display: 'inline-block', verticalAlign: 'middle' }}>
                     <Typography variant="h5">{displayName}</Typography>