Skip to content

Icons / Illustrations

Car & Classic provides a set of icons and illustrations to bring our UI to life.

Icons

You can preview available icons in the design-kit icons page.

In the codebase, icons live under:

laravel/resources/inertia/assets/icons/

They are used through the <Icon> component:

<script setup lang="ts">
import Icon from '@inertia/views/components/icon/Icon.vue';
</script>

<template>
  <Icon name="spinner" class="animate-spin" size="24" />
</template>

See Icon in Storybook for available props.

Icon Container

All icons use a fixed 24px container to ensure alignment and consistency, regardless of the icon's shape or visual weight:

icon safe zone

Adding a New Icon

  1. Open the Figma icon page.
  2. Copy the icon together with its 24px safe zone.
  3. Optimize the SVG at svgviewer.dev to reduce file size.
  4. Save it in laravel/resources/inertia/assets/icons/ using the same name as in Figma.
  5. Use it via <Icon name="your-icon-name" />.

Design Icons

Design icons are larger illustrations found in our Figma design icon section.

They differ from regular icons in the following ways:

  • Include background elements
  • May use stroke or fill styles
  • Can be visually unbalanced (not centered)

design icon

Storage Location

Store all design icons in:

laravel/resources/images/design-icons/

If you find similar assets in laravel/resources/images/illustrations/, move them to laravel/resources/images/design-icons/.