Usage
Bitrix24 UI automatically registers the @bitrix24/b24icons module for you, so there's no additional setup required.
Icon component
They are very easy to use:
You can use any from the https://bitrix24.github.io/b24icons/icons/ collection.
Component props
Some components also have an icon prop to display an icon, like the Button for example:
<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>
<template>
<B24Button :icon="RocketIcon">Button</B24Button>
</template>
Set of icons
The interface uses the following set of icons
src/runtime/dictionary/icons.ts
import ArrowToTheLeftIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheLeftIcon'
import ArrowToTheRightIcon from '@bitrix24/b24icons-vue/actions/ArrowToTheRightIcon'
import CheckIcon from '@bitrix24/b24icons-vue/outline/CheckLIcon'
import ChevronTopLIcon from '@bitrix24/b24icons-vue/outline/ChevronTopLIcon'
import ChevronToTheLeftIcon from '@bitrix24/b24icons-vue/outline/ChevronLeftLIcon'
import ChevronToTheRightIcon from '@bitrix24/b24icons-vue/outline/ChevronRightLIcon'
import DoubleShevronsRightIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsRightIcon'
import DoubleShevronsLeftIcon from '@bitrix24/b24icons-vue/actions/DoubleShevronsLeftIcon'
import CrossMIcon from '@bitrix24/b24icons-vue/outline/CrossMIcon'
import DotsIcon from '@bitrix24/b24icons-vue/button/DotsIcon'
import Refresh6Icon from '@bitrix24/b24icons-vue/actions/Refresh6Icon'
import Minus30Icon from '@bitrix24/b24icons-vue/actions/Minus30Icon'
import Plus30Icon from '@bitrix24/b24icons-vue/actions/Plus30Icon'
import Search2Icon from '@bitrix24/b24icons-vue/main/Search2Icon'
import LoaderWaitIcon from '@bitrix24/b24icons-vue/animated/LoaderWaitIcon'
import ChevronDownLIcon from '@bitrix24/b24icons-vue/outline/ChevronDownLIcon'
import ScreenIcon from '@bitrix24/b24icons-vue/outline/ScreenIcon'
import SunIconAir from '@bitrix24/b24icons-vue/outline/SunIcon'
import MoonIconAir from '@bitrix24/b24icons-vue/outline/MoonIcon'
import TagIcon from '@bitrix24/b24icons-vue/outline/TagIcon'
import InfoCircleIcon from '@bitrix24/b24icons-vue/outline/InfoCircleIcon'
import IdeaLampIcon from '@bitrix24/b24icons-vue/outline/IdeaLampIcon'
import WarningIcon from '@bitrix24/b24icons-vue/main/WarningIcon'
import AlertIcon from '@bitrix24/b24icons-vue/outline/AlertIcon'
import CopyIcon from '@bitrix24/b24icons-vue/outline/CopyIcon'
import CircleCheckIcon from '@bitrix24/b24icons-vue/outline/CircleCheckIcon'
import FileIcon from '@bitrix24/b24icons-vue/outline/FileIcon'
import UploadFileIcon from '@bitrix24/b24icons-vue/outline/UploadFileIcon'
import ArrowDownLIcon from '@bitrix24/b24icons-vue/outline/ArrowDownLIcon'
import ArrowTopLIcon from '@bitrix24/b24icons-vue/outline/ArrowTopLIcon'
import StopLIcon from '@bitrix24/b24icons-vue/outline/StopLIcon'
import RefreshIcon from '@bitrix24/b24icons-vue/outline/RefreshIcon'
import SendIcon from '@bitrix24/b24icons-vue/main/SendIcon'
import DragLIcon from '@bitrix24/b24icons-vue/outline/DragLIcon'
import GoToLIcon from '@bitrix24/b24icons-vue/outline/GoToLIcon'
import HamburgerMenuIcon from '@bitrix24/b24icons-vue/outline/HamburgerMenuIcon'
import CloseChatIcon from '@bitrix24/b24icons-vue/outline/CloseChatIcon'
import OpenChatIcon from '@bitrix24/b24icons-vue/outline/OpenChatIcon'
import GitHubIcon from '@bitrix24/b24icons-vue/social/GitHubIcon'
import MdnwebdocsIcon from '@bitrix24/b24icons-vue/social/MdnwebdocsIcon'
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
import DemonstrationOnIcon from '@bitrix24/b24icons-vue/outline/DemonstrationOnIcon'
import DesignIcon from '@bitrix24/b24icons-vue/outline/DesignIcon'
import FavoriteIcon from '@bitrix24/b24icons-vue/outline/FavoriteIcon'
import MoreMIcon from '@bitrix24/b24icons-vue/outline/MoreMIcon'
import NuxtIcon from '@bitrix24/b24icons-vue/file-type/NuxtIcon'
import AiStarsIcon from '@bitrix24/b24icons-vue/outline/AiStarsIcon'
import EncloseTextInCodeTagIcon from '@bitrix24/b24icons-vue/editor/EncloseTextInCodeTagIcon'
import PlayLIcon from '@bitrix24/b24icons-vue/outline/PlayLIcon'
export default {
arrowLeft: ArrowToTheLeftIcon,
arrowRight: ArrowToTheRightIcon,
check: CheckIcon,
chevronDoubleLeft: DoubleShevronsLeftIcon,
chevronDoubleRight: DoubleShevronsRightIcon,
chevronDown: ChevronDownLIcon,
chevronLeft: ChevronToTheLeftIcon,
chevronRight: ChevronToTheRightIcon,
chevronUp: ChevronTopLIcon,
close: CrossMIcon,
ellipsis: DotsIcon,
external: GoToLIcon,
file: FileIcon,
loading: LoaderWaitIcon,
refresh: Refresh6Icon,
minus: Minus30Icon,
plus: Plus30Icon,
search: Search2Icon,
upload: UploadFileIcon,
system: ScreenIcon,
light: SunIconAir,
dark: MoonIconAir,
hash: TagIcon,
warning: WarningIcon,
tip: IdeaLampIcon,
info: InfoCircleIcon,
// this for error
caution: AlertIcon,
copyCheck: CircleCheckIcon,
copy: CopyIcon,
imSend: SendIcon,
arrowDown: ArrowDownLIcon,
arrowUp: ArrowTopLIcon,
stop: StopLIcon,
reload: RefreshIcon,
drag: DragLIcon,
menu: HamburgerMenuIcon,
panelClose: CloseChatIcon,
panelOpen: OpenChatIcon,
// Named icons exposed to markdown authors via `iconName`
// (ProseCallout, ProsePrompt, page header / hero CTAs, dropdown actions, ...)
GitHubIcon, // GitHub repository / source link
NuxtIcon, // Nuxt-specific docs / framework references
Bitrix24Icon, // Bitrix24 brand link
MdnwebdocsIcon, // MDN documentation references
MdnWebDocIcon: MdnwebdocsIcon, // legacy alias used in many ::callout blocks
InfoCircleIcon, // generic info / about link
DemonstrationOnIcon, // demo / playground / showcase
DesignIcon, // "Edit this page" entry point
FavoriteIcon, // "Star on GitHub" / favorite CTA
MoreMIcon, // dropdown menu trigger
AiStarsIcon, // "Explain with AI" / AI assistant entry
EncloseTextInCodeTagIcon, // source / "View code" CTA
PlayLIcon // "Try it" / playground / REPL CTA
}