Skip to content

Приложение A: Реестр иконок Open WebUI

Общие параметры

Все иконки платформы ADOLF используют библиотеку Lucide Icons со следующими едиными параметрами:

ПараметрЗначение
Размер24 × 24 px
Stroke width1.5 px
Stroke linecapround
Stroke linejoinround
Fillnone
StrokecurrentColor

Стандартный stroke-width Lucide — 2 px. В ADOLF используется 1.5 px для визуально более лёгкого и современного восприятия иконок в интерфейсе Open WebUI.

Системные иконки

Иконки, используемые для общих элементов интерфейса Open WebUI.

Логотип приложения

НазначениеОсновной логотип ADOLF в Open WebUI
Lucide namebot-message-square
Пакетlucide (основной)
React importBotMessageSquare
Ссылкаlucide.dev/icons/bot-message-square

Логотип приложения

html
<i data-lucide="bot-message-square" stroke-width="1.5"></i>

Новый чат

НазначениеКнопка создания нового чата в sidebar
Lucide namemessage-square-more
Пакетlucide (основной)
React importMessageSquareMore
Ссылкаlucide.dev/icons/message-square-more

Новый чат

html
<i data-lucide="message-square-more" stroke-width="1.5"></i>

Иконки модулей

Knowledge

МодульKnowledge — база знаний, RAG
Lucide namedatabase
Пакетlucide (основной)
React importDatabase
Ссылкаlucide.dev/icons/database

Knowledge

html
<i data-lucide="database" stroke-width="1.5"></i>

Content Factory

МодульContent Factory — генерация SEO-контента
Lucide nameshirt
Пакетlucide (основной)
React importShirt
Ссылкаlucide.dev/icons/shirt

Content Factory

html
<i data-lucide="shirt" stroke-width="1.5"></i>

CFO

МодульCFO — финансовая аналитика
Lucide namechart-candlestick
Пакетlucide (основной)
React importChartCandlestick
Ссылкаlucide.dev/icons/chart-candlestick

CFO

html
<i data-lucide="chart-candlestick" stroke-width="1.5"></i>

Reputation

МодульReputation — управление отзывами
Lucide namethumbs-up
Пакетlucide (основной)
React importThumbsUp
Ссылкаlucide.dev/icons/thumbs-up

Reputation

html
<i data-lucide="thumbs-up" stroke-width="1.5"></i>

Watcher

МодульWatcher — мониторинг конкурентов
Lucide namehat-glasses
Пакетlucide (основной)
React importHatGlasses
Ссылкаlucide.dev/icons/hat-glasses

Watcher

html
<i data-lucide="hat-glasses" stroke-width="1.5"></i>

Marketing

МодульMarketing — автоматизация рекламы
Lucide nametarget
Пакетlucide (основной)
React importTarget
Ссылкаlucide.dev/icons/target

Marketing

html
<i data-lucide="target" stroke-width="1.5"></i>

Scout

МодульScout — предиктивная аналитика
Lucide namebinoculars
Пакетlucide (основной)
React importBinoculars
Ссылкаlucide.dev/icons/binoculars

Scout

html
<i data-lucide="binoculars" stroke-width="1.5"></i>

Lex

МодульLex — юридический мониторинг
Lucide namescale
Пакетlucide (основной)
React importScale
Ссылкаlucide.dev/icons/scale

Lex

html
<i data-lucide="scale" stroke-width="1.5"></i>

Logistic

МодульLogistic — оптимизация складов
Lucide nametruck
Пакетlucide (основной)
React importTruck
Ссылкаlucide.dev/icons/truck

Logistic

html
<i data-lucide="truck" stroke-width="1.5"></i>

Office

МодульOffice — мониторинг AI-агентов
Lucide namebuilding-2
Пакетlucide (основной)
React importBuilding2
Ссылкаlucide.dev/icons/building-2

Office

html
<i data-lucide="building-2" stroke-width="1.5"></i>

Shop

МодульShop — интеграция WooCommerce
Lucide nameshopping-cart
Пакетlucide (основной)
React importShoppingCart
Ссылкаlucide.dev/icons/shopping-cart

Shop

html
<i data-lucide="shopping-cart" stroke-width="1.5"></i>

Сводная таблица

#НазначениеLucide NameПакетФайл
1Логотип приложенияbot-message-squarelucideapp-logo.svg
2Новый чатmessage-square-morelucidenew-chat.svg
3Knowledgedatabaselucideknowledge.svg
4Content Factoryshirtlucidecontent-factory.svg
5CFOchart-candlesticklucidecfo.svg
6Reputationthumbs-uplucidereputation.svg
7Watcherhat-glasseslucidewatcher.svg
8Marketingtargetlucidemarketing.svg
9Scoutbinocularslucidescout.svg
10Lexscalelucidelex.svg
11Logistictrucklucidelogistic.svg
12Officebuilding-2lucideoffice.svg
13Shopshopping-cartlucideshop.svg

Установка

npm

bash
# Основной пакет
npm install lucide-react

CDN (HTML)

html
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>
  lucide.createIcons({
    attrs: { 'stroke-width': 1.5 }
  });
</script>

Open WebUI (SvelteKit)

Глобальное переопределение stroke-width для всех Lucide-иконок:

svelte
<script>
  import Icon from '$lib/components/Icon.svelte';
</script>

<Icon name="bot-message-square" strokeWidth={1.5} size={24} />

Связанные документы

ДокументОписание
Раздел 0: ВведениеОбзор дизайн-системы
Раздел 2: ТематизацияЕдиная цветовая схема, маркетплейсы
shadcn-variables.cssCSS-переменные цветов модулей
Lucide IconsПоиск иконок

Версия: 1.3 | Дата: Март 2026

Документация ADOLF Platform