Icons

799 icons, drawn for Vitral

One outline set on a 24×24 grid: round 2-unit strokes, no fill, in the current text colour. Each icon is a named export of @vitral/icons, so an application bundles only the ones it imports. Size and stroke come from the theme's icon.size and icon.strokeWidth tokens; size and stroke-width override them on one icon.

799 icons

Arrows & navigation 63

Interface & actions 93

Shapes 20

Files & folders 32

Text & formatting 37

Media 44

Communication 33

People & accounts 19

Devices & hardware 28

Development 31

Charts & data 20

Maps & location 19

Transport 21

Time & calendar 19

Weather & nature 37

Security 20

Health & medical 22

Home & buildings 26

Food & drink 30

School & education 36

E-commerce 32

Finance 32

Games 50

Sports 35

Icons from other libraries

Every icon prop, on a button or a menu item or a toast or a tree node, goes through <Icon>, which takes more than this set: another library's Vue component, SVG markup you trust, or the classes of an icon font. Whatever it is gets the vt-icon class, the theme's size and the same hidden-or-labelled accessibility.

Other libraries

<script setup lang="ts">
import { h, markRaw } from 'vue';
import { Camera } from 'lucide-vue-next';
import { Icon as Iconify } from '@iconify/vue';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faUser } from '@fortawesome/free-solid-svg-icons';
import { graduationCap } from '@vitral/icons';

// A component that needs its own props is wrapped in a function.
const MdiHome = () => h(Iconify, { icon: 'mdi:home' });
const FaUser = () => h(FontAwesomeIcon, { icon: faUser });

// Components kept in a model are marked raw, so Vue does not make them reactive.
const items = [
    { label: 'Photo', icon: markRaw(Camera) },
    { label: 'Home', icon: MdiHome },
    { label: 'Course', icon: graduationCap }
];
</script>

<template>
    <Button label="Shoot" :icon="Camera" />
    <Button label="Profile" :icon="FaUser" />
    <Button label="Me" icon="fa-solid fa-user" />        <!-- an icon font's classes -->
    <Button label="Logo" :icon="'<svg viewBox=…>…</svg>'" />  <!-- trusted markup -->
    <Menu :model="items" />
</template>