Skip to content

Add lucide icons to avatar #2266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
joyenjoyer wants to merge 5 commits into
base: v12
Choose a base branch
from
+1,372 −269
Open

Add lucide icons to avatar #2266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2bc3b92
feat(ui-avatar): add lucide icons to Avatar
joyenjoyer Nov 26, 2025
32c91ba
refactor(ui-react-utils): changes after review
joyenjoyer Dec 5, 2025
54f0d86
docs(ui-react-utils,ui-icons-lucide,ui-avatar): add code improvement …
matyasf Dec 9, 2025
543b72a
refactor(ui-icons-lucide,ui-avatar): review fixes
joyenjoyer Dec 9, 2025
7e5aaeb
refactor(ui-react-utils,ui-icons-lucide,ui-avatar): fixes after revie…
joyenjoyer Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions packages/__docs__/src/Icons/LucideIconsGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ function getUsageInfo(iconName: string) {

const MyIcon = () => {
return (
<${iconName} size={24} />
<${iconName} size={'2xl'} color='successColor'/>
)
}`
}
Expand Down Expand Up @@ -290,16 +290,21 @@ const LucideIconsGallery = () => {
</Heading>
<ul>
<li>
<code>size</code>: Number (pixels) - e.g., <code>24</code>
<code>size</code>: Number (pixels) or semantic token - e.g.,{' '}
<code>&quot;sm&quot;</code>
</li>
<li>
<code>color</code>: CSS color - e.g.,{' '}
<code>&quot;currentColor&quot;</code>
<code>color</code>: CSS color or semantic token- e.g.,{' '}
<code>&quot;successColor&quot;</code>
</li>
<li>
<code>strokeWidth</code>: Number - e.g., <code>2</code>
<code>strokeWidth</code>: Number or semantic token - e.g.,{' '}
<code>&quot;sm&quot;</code>
</li>
<li>
Plus all standard SVG props (except for className, style, css,
children etc.)
</li>
<li>Plus all standard SVG props (className, style, etc.)</li>
</ul>
<p>
These icons use the pure Lucide API. See{' '}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-avatar/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"@babel/runtime": "^7.27.6",
"@instructure/emotion": "workspace:*",
"@instructure/shared-types": "workspace:*",
"@instructure/ui-icons": "workspace:*",
"@instructure/ui-icons-lucide": "workspace:*",
"@instructure/ui-react-utils": "workspace:*",
"@instructure/ui-view": "workspace:*"
},
Expand Down
192 changes: 111 additions & 81 deletions packages/ui-avatar/src/Avatar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,22 @@ readonly: true

<div>
<View display="block" padding="small medium" background="primary">
<Avatar name="Arthur C. Clarke" />
<Avatar name="James Arias" color="accent2" />
<Avatar name="Charles Kimball" color="accent3" />
<Avatar name="Melissa Reed" color="accent4" />
<Avatar name="Heather Wheeler" color="accent5" />
<Avatar name="David Herbert" color="accent6" />
<Avatar name="Isaac Asimov" color="accent1" />
<Avatar name="Arthur C. Clarke" />
<Avatar name="James Arias" color="accent2" />
<Avatar name="Charles Kimball" color="accent3" />
<Avatar name="Melissa Reed" color="accent4" />
<Avatar name="Heather Wheeler" color="accent5" />
<Avatar name="David Herbert" color="accent6" />
<Avatar name="Isaac Asimov" color="accent1" />
</View>
<View display="block" padding="small medium" background="primary">
<Avatar name="Arthur C. Clarke" hasInverseColor />
<Avatar name="James Arias" color="accent2" hasInverseColor />
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
<Avatar name="David Herbert" color="accent6" hasInverseColor />
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
<Avatar name="Arthur C. Clarke" hasInverseColor />
<Avatar name="James Arias" color="accent2" hasInverseColor />
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
<Avatar name="David Herbert" color="accent6" hasInverseColor />
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
</View>
</div>
```
Expand All @@ -46,16 +46,47 @@ type: example
readonly: true
---
<View display="block" padding="small medium" background="primary">
<Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="medium" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="x-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="xx-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="xx-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
Copy link
Contributor Author

@joyenjoyer joyenjoyer Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This has to be replaced later to the appropriate Lucide equivalent icon. (Alex is still working on the mapping)

<Avatar size="x-small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="small" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="medium" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="x-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
<Avatar size="xx-large" color="ai" name="AI Assistant" renderIcon={IconAiSolid} />
</View>
```

### Using Lucide Icons

Lucide icons in Avatar are automatically sized and colored according to the Avatar's `size` and `color` props, so manual adjustments are not needed on the icon itself.

```js
---
type: example
---
<div>
<View display="block" padding="small medium">
<Avatar name="User Avatar" size="xx-small" renderIcon={UserInstUIIcon} />
<Avatar name="User Avatar" size="x-small" renderIcon={UserInstUIIcon} />
<Avatar name="User Avatar" size="small" renderIcon={UserInstUIIcon} />
<Avatar name="User Avatar" size="medium" renderIcon={UserInstUIIcon} />
<Avatar name="User Avatar" size="large" renderIcon={UserInstUIIcon} />
<Avatar name="User Avatar" size="x-large" renderIcon={UserInstUIIcon} />
<Avatar name="User Avatar" size="xx-large" renderIcon={UserInstUIIcon} />
</View>
<View display="block" padding="small medium">
<Avatar name="Profile" size="small" color="accent2" renderIcon={<CircleUserInstUIIcon />} />
<Avatar name="Group" size="medium" color="accent3" renderIcon={<UsersInstUIIcon />} />
<Avatar name="Settings" size="large" color="accent4" renderIcon={<SettingsInstUIIcon />} />
</View>
<View display="block" padding="small medium">
<Avatar name="Profile" size="large" color="accent4" renderIcon={()=><CircleUserInstUIIcon />} />
<Avatar name="Group" size="x-large" color="accent5" renderIcon={()=><UsersInstUIIcon />} />
<Avatar name="Settings" size="xx-large" color="accent6" renderIcon={()=><SettingsInstUIIcon />} />
</View>
</div>
```

### Size

The `size` prop allows you to select from `xx-small`, `x-small`, `small`, `medium` _(default)_, `large`, `x-large`, and `xx-large`. Each size has predefined dimensions and typography scales.
Expand All @@ -66,31 +97,31 @@ type: example
---
<div>
<View display="block" padding="small medium">
<Avatar name="Arthur C. Clarke" size="xx-small" />
<Avatar name="James Arias" size="x-small" />
<Avatar name="Charles Kimball" size="small" />
<Avatar name="Melissa Reed" size="medium" />
<Avatar name="Heather Wheeler" size="large" />
<Avatar name="David Herbert" size="x-large" />
<Avatar name="Isaac Asimov" size="xx-large" />
<Avatar name="Arthur C. Clarke" size="xx-small" />
<Avatar name="James Arias" size="x-small" />
<Avatar name="Charles Kimball" size="small" />
<Avatar name="Melissa Reed" size="medium" />
<Avatar name="Heather Wheeler" size="large" />
<Avatar name="David Herbert" size="x-large" />
<Avatar name="Isaac Asimov" size="xx-large" />
</View>
<View display="block" padding="small medium" background="primary">
<Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
<Avatar name="James Arias" size="x-small" src={avatarSquare} />
<Avatar name="Charles Kimball" size="small" src={avatarSquare} />
<Avatar name="Melissa Reed" size="medium" src={avatarSquare} />
<Avatar name="Heather Wheeler" size="large" src={avatarSquare} />
<Avatar name="David Herbert" size="x-large" src={avatarSquare} />
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
<Avatar name="Arthur C. Clarke" size="xx-small" src={avatarSquare} />
<Avatar name="James Arias" size="x-small" src={avatarSquare} />
<Avatar name="Charles Kimball" size="small" src={avatarSquare} />
<Avatar name="Melissa Reed" size="medium" src={avatarSquare} />
<Avatar name="Heather Wheeler" size="large" src={avatarSquare} />
<Avatar name="David Herbert" size="x-large" src={avatarSquare} />
<Avatar name="Isaac Asimov" size="xx-large" src={avatarSquare} />
</View>
<View display="block" padding="small medium">
<Avatar name="Arthur C. Clarke" renderIcon={<IconGroupLine />} size="xx-small" />
<Avatar name="James Arias" renderIcon={<IconGroupLine />} size="x-small" />
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} size="small" />
<Avatar name="Melissa Reed" renderIcon={<IconGroupLine />} size="medium" />
<Avatar name="Heather Wheeler" renderIcon={<IconGroupLine />} size="large" />
<Avatar name="David Herbert" renderIcon={<IconGroupLine />} size="x-large" />
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} size="xx-large" />
<Avatar name="Arthur C. Clarke" renderIcon={UsersInstUIIcon} size="xx-small" />
<Avatar name="James Arias" renderIcon={UsersInstUIIcon} size="x-small" />
<Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} size="small" />
<Avatar name="Melissa Reed" renderIcon={UsersInstUIIcon} size="medium" />
<Avatar name="Heather Wheeler" renderIcon={UsersInstUIIcon} size="large" />
<Avatar name="David Herbert" renderIcon={UsersInstUIIcon} size="x-large" />
<Avatar name="Isaac Asimov" renderIcon={UsersInstUIIcon} size="xx-large" />
</View>
</div>
```
Expand All @@ -105,22 +136,22 @@ type: example
---
<div>
<View display="block" padding="small medium">
<Avatar name="Arthur C. Clarke" />
<Avatar name="James Arias" color="accent2" />
<Avatar name="Charles Kimball" color="accent3" />
<Avatar name="Melissa Reed" color="accent4" />
<Avatar name="Heather Wheeler" color="accent5" />
<Avatar name="David Herbert" color="accent6" />
<Avatar name="Isaac Asimov" color="accent1" />
<Avatar name="Arthur C. Clarke" />
<Avatar name="James Arias" color="accent2" />
<Avatar name="Charles Kimball" color="accent3" />
<Avatar name="Melissa Reed" color="accent4" />
<Avatar name="Heather Wheeler" color="accent5" />
<Avatar name="David Herbert" color="accent6" />
<Avatar name="Isaac Asimov" color="accent1" />
</View>
<View display="block" padding="small medium">
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" />
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" />
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" />
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" />
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" />
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" />
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" />
<Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" />
<Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" />
<Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" />
<Avatar renderIcon={UsersInstUIIcon} name="Melissa Reed" color="accent4" />
<Avatar renderIcon={UsersInstUIIcon} name="Heather Wheeler" color="accent5" />
<Avatar renderIcon={UsersInstUIIcon} name="David Herbert" color="accent6" />
<Avatar renderIcon={UsersInstUIIcon} name="Isaac Asimov" color="accent1" />
</View>
</div>
```
Expand All @@ -135,22 +166,22 @@ type: example
---
<div>
<View display="block" padding="small medium" background="primary">
<Avatar name="Arthur C. Clarke" hasInverseColor margin="general.spaceXs" />
<Avatar name="James Arias" color="accent2" hasInverseColor />
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
<Avatar name="David Herbert" color="accent6" hasInverseColor />
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
<Avatar name="Arthur C. Clarke" hasInverseColor />
<Avatar name="James Arias" color="accent2" hasInverseColor />
<Avatar name="Charles Kimball" color="accent3" hasInverseColor />
<Avatar name="Melissa Reed" color="accent4" hasInverseColor />
<Avatar name="Heather Wheeler" color="accent5" hasInverseColor />
<Avatar name="David Herbert" color="accent6" hasInverseColor />
<Avatar name="Isaac Asimov" color="accent1" hasInverseColor />
</View>
<View display="block" padding="small medium" background="primary">
<Avatar renderIcon={<IconGroupLine />} name="Arthur C. Clarke" hasInverseColor />
<Avatar renderIcon={<IconGroupLine />} name="James Arias" color="accent2" hasInverseColor />
<Avatar renderIcon={<IconGroupLine />} name="Charles Kimball" color="accent3" hasInverseColor />
<Avatar renderIcon={<IconGroupLine />} name="Melissa Reed" color="accent4" hasInverseColor />
<Avatar renderIcon={<IconGroupLine />} name="Heather Wheeler" color="accent5" hasInverseColor />
<Avatar renderIcon={<IconGroupLine />} name="David Herbert" color="accent6" hasInverseColor />
<Avatar renderIcon={<IconGroupLine />} name="Isaac Asimov" color="accent1" hasInverseColor />
<Avatar renderIcon={UsersInstUIIcon} name="Arthur C. Clarke" hasInverseColor />
<Avatar renderIcon={UsersInstUIIcon} name="James Arias" color="accent2" hasInverseColor />
<Avatar renderIcon={UsersInstUIIcon} name="Charles Kimball" color="accent3" hasInverseColor />
<Avatar renderIcon={UsersInstUIIcon} name="Melissa Reed" color="accent4" hasInverseColor />
<Avatar renderIcon={UsersInstUIIcon} name="Heather Wheeler" color="accent5" hasInverseColor />
<Avatar renderIcon={UsersInstUIIcon} name="David Herbert" color="accent6" hasInverseColor />
<Avatar renderIcon={UsersInstUIIcon} name="Isaac Asimov" color="accent1" hasInverseColor />
</View>
</div>
```
Expand All @@ -162,10 +193,10 @@ In case you need more control over the color, feel free to use the `themeOverrid
type: example
---
<div>
<Avatar name="Isaac Asimov" renderIcon={<IconGroupLine />} themeOverride={{ accent1TextColor: '#efb410' }} />
<Avatar name="Heather Wheeler" color="accent5" themeOverride={{ accent5TextColor: 'magenta' }} />
<Avatar name="Charles Kimball" renderIcon={<IconGroupLine />} hasInverseColor themeOverride={{ textOnColor: 'lightblue', backgroundColor: 'black' }} />
<Avatar name="David Herbert" hasInverseColor color="accent5" themeOverride={{ accent5BackgroundColor: '#efb410' }} />
<Avatar name="Isaac Asimov" renderIcon={UsersInstUIIcon} themeOverride={{ accent1TextColor: '#efb410' }} />
<Avatar name="Heather Wheeler" color="accent5" themeOverride={{ accent5TextColor: 'magenta' }} />
<Avatar name="Charles Kimball" renderIcon={UsersInstUIIcon} hasInverseColor themeOverride={{ textOnColor: 'lightblue', backgroundColor: 'black' }} />
<Avatar name="David Herbert" hasInverseColor color="accent5" themeOverride={{ accent5BackgroundColor: '#efb410' }} />
</div>
```

Expand All @@ -179,14 +210,14 @@ type: example
---
<div>
<Text>Inline avatars: </Text>
<Avatar name="John Doe" size="small" display="inline" />
<Avatar name="Jane Smith" size="small" display="inline" />
<Avatar name="John Doe" size="small" display="inline" />
<Avatar name="Jane Smith" size="small" display="inline" />
<Text> are displayed inline with text.</Text>

<div style={{ marginTop: '1rem' }}>
<Text>Block avatars:</Text>
<Avatar name="John Doe" size="small" display="block" />
<Avatar name="Jane Smith" size="small" display="block" />
<Avatar name="John Doe" size="small" display="block" />
<Avatar name="Jane Smith" size="small" display="block" />
<Text>stack vertically.</Text>
</div>
</div>
Expand All @@ -202,7 +233,7 @@ type: example
---
<div>
<Avatar name="Sarah Robinson" src={avatarSquare} showBorder="always" />
<Avatar name="Sarah Robinson" renderIcon={<IconGroupLine />} showBorder="never" />
<Avatar name="Sarah Robinson" renderIcon={UsersInstUIIcon} showBorder="never" />
</div>
```

Expand All @@ -218,8 +249,7 @@ type: example
<Avatar
name="John Doe"
src={avatarSquare}
renderIcon={<IconGroupLine />}

renderIcon={UsersInstUIIcon}
/>
<Text>Image takes priority over icon</Text>
</div>
Expand Down
Loading