[GH-ISSUE #9160] Integrate Lobe Hub Icons with theme-adaptive monochrome option #15408

New Issue

GiteaMirror · 2026-04-19T21:37:19-05:00

GiteaMirror commented

2026-04-19 21:37:19 -05:00

Originally created by @bannert1337 on GitHub (Jan 31, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/9160

Feature Request

Problem

Currently, the UI lacks visually consistent and theme-adaptive model icons. Integrating Lobe Hub Icons would provide a professional and cohesive visual experience.

Proposed Solution

Integrate Lobe Hub Icons for model icons
Add option to select between chromatic or monochrome variants
Make monochrome icons adapt to active theme:
- Dark theme: White color
- Light theme: Black color

Implementation Details

The integration can be done using Typescript as shown:

import { DeepSeek } from '@lobehub/icons';
import { Flexbox } from 'react-layout-kit';

export default () => (
  <Flexbox gap={16} horizontal>
    <DeepSeek size={64} />
    <DeepSeek.Color size={64} />
  </Flexbox>
);

Additional customization options like avatar implementation:

import { DeepSeek } from '@lobehub/icons';
import { Flexbox } from 'react-layout-kit';

export default () => (
  <Flexbox gap={16} horizontal>
    <DeepSeek.Avatar size={64} />
    <DeepSeek.Avatar size={64} shape={'square'} />
  </Flexbox>
);

Resources

Lobe Hub Icons documentation: https://icons.lobehub.com/components/deep-seek

This implementation would enhance the visual consistency and customization options for model icons while maintaining theme adaptability.

Originally created by @bannert1337 on GitHub (Jan 31, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/9160 # Feature Request ### Problem Currently, the UI lacks visually consistent and theme-adaptive model icons. Integrating Lobe Hub Icons would provide a professional and cohesive visual experience. ### Proposed Solution 1. Integrate Lobe Hub Icons for model icons 2. Add option to select between chromatic or monochrome variants 3. Make monochrome icons adapt to active theme: - Dark theme: White color - Light theme: Black color ### Implementation Details The integration can be done using Typescript as shown: ```js import { DeepSeek } from '@lobehub/icons'; import { Flexbox } from 'react-layout-kit'; export default () => ( <Flexbox gap={16} horizontal> <DeepSeek size={64} /> <DeepSeek.Color size={64} /> </Flexbox> ); ``` Additional customization options like avatar implementation: ```js import { DeepSeek } from '@lobehub/icons'; import { Flexbox } from 'react-layout-kit'; export default () => ( <Flexbox gap={16} horizontal> <DeepSeek.Avatar size={64} /> <DeepSeek.Avatar size={64} shape={'square'} /> </Flexbox> ); ``` ### Resources - Lobe Hub Icons documentation: https://icons.lobehub.com/components/deep-seek This implementation would enhance the visual consistency and customization options for model icons while maintaining theme adaptability.

GiteaMirror closed this issue

2026-04-19 21:37:19 -05:00

GiteaMirror referenced this issue

2026-04-19 23:20:38 -05:00

[GH-ISSUE #15408] issue: Emoji in Calls #17558

GiteaMirror referenced this issue

2026-04-25 06:56:41 -05:00

[GH-ISSUE #15408] issue: Emoji in Calls #33087

GiteaMirror referenced this issue

2026-05-05 18:59:06 -05:00

[GH-ISSUE #15408] issue: Emoji in Calls #56224

GiteaMirror referenced this issue