Custom Icons

Dynamic SVG icon loading from assets/icons directory. Simply add SVG files to the icons folder and reference them by name.

Basic Usage

Simple examples of the custom Icon component with different icons and sizes.

Persona (24px, max-width: 24px)
Astronaut (32px, max-width: 32px)
Rocket (32px, max-width: 32px)
Profile (24px, max-width: 24px)
customIcons.logout (24px, max-width: 24px)
customIcons.project (24px, max-width: 24px)
customIcons.workspace (24px, max-width: 24px)

Different Sizes

Icons can be sized using numbers or strings with units.

16px
24px
32px
48px
64px

Max Width Control

Use the maxWidth prop to control the maximum width of the icon, useful for responsive design.

Size: 48px, Max-width: 24px
Size: 64px, Max-width: 32px
Size: 80px, Max-width: 40px

Custom Classes

Apply custom CSS classes for styling, including color classes.

Primary Color
Accent Color
Positive Color
Negative Color
Warning Color

Error Handling

The component gracefully handles missing or invalid icons.

❌ nonexistentMissing Icon
❌ invalidInvalid Icon

Usage Examples

Code examples showing how to use the Icon component in different contexts.

<!-- Basic usage -->
<CustomIcon name="persona" size="24" />

<!-- With custom class -->
<CustomIcon name="rocket" size="32" class="" />

<!-- In buttons -->
<q-btn>
  <CustomIcon name="astronaut" size="16" class="q-mr-sm" />
  Launch
</q-btn>

<!-- In cards -->
<q-card>
  <q-card-section>
    <CustomIcon name="persona" size="48" class="text-accent" />
    <h6>User Profile</h6>
  </q-card-section>
</q-card>

Interactive Examples

Live examples of icons used in buttons, cards, and other components.

Button Examples

Card Examples

Rocket Card

Perfect for launch-related features

Astronaut Card

Great for exploration features

Persona Card

Ideal for user-related features

customIcons.workspaceCard

customIcons.workspaceCardDescription

customIcons.projectCard

customIcons.projectCardDescription

customIcons.profileCard

customIcons.profileCardDescription

Adding New Icons

Learn how to add new icons to your project.

1

Download SVG Files

Download SVG files from TheNounProject.com or other sources and save them to the assets/icons directory.

2

Name Your Files

Name your SVG files descriptively (e.g., 'user-profile.svg', 'settings-gear.svg').

3

Use in Components

Reference your icons by filename (without .svg extension) in the Icon component.