CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-quasar--extras

Comprehensive collection of web fonts, icons, and animations for the Quasar Framework

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

ionicons.mddocs/

Ionicons

Ionic Framework's icon library providing beautifully crafted icons designed for iOS, Android, and web applications. Multiple versions available for compatibility across different Ionic and framework versions.

Capabilities

Ionicons v8 (Latest)

Latest Ionicons v8.0.8 with newest icon designs and optimizations.

/**
 * Ionicons v8 SVG exports
 * Each constant contains SVG path data for the icon
 */
export declare const ionAdd: string;
export declare const ionAddCircle: string;
export declare const ionAddCircleOutline: string;
export declare const ionAddOutline: string;
export declare const ionAlert: string;
export declare const ionAlertCircle: string;
export declare const ionAlertCircleOutline: string;
export declare const ionAlertOutline: string;
export declare const ionArrowBack: string;
export declare const ionArrowBackCircle: string;
export declare const ionArrowBackCircleOutline: string;
export declare const ionArrowBackOutline: string;
export declare const ionArrowDown: string;
export declare const ionArrowDownCircle: string;
export declare const ionArrowDownCircleOutline: string;
export declare const ionArrowDownOutline: string;
export declare const ionArrowForward: string;
export declare const ionArrowForwardCircle: string;
export declare const ionArrowForwardCircleOutline: string;
export declare const ionArrowForwardOutline: string;
export declare const ionArrowUp: string;
export declare const ionArrowUpCircle: string;
export declare const ionArrowUpCircleOutline: string;
export declare const ionArrowUpOutline: string;
export declare const ionAt: string;
export declare const ionAtCircle: string;
export declare const ionAtCircleOutline: string;
export declare const ionAtOutline: string;
export declare const ionAttach: string;
export declare const ionAttachOutline: string;
export declare const ionBookmark: string;
export declare const ionBookmarkOutline: string;
export declare const ionCall: string;
export declare const ionCallOutline: string;
export declare const ionCamera: string;
export declare const ionCameraOutline: string;
export declare const ionCameraReverse: string;
export declare const ionCameraReverseOutline: string;
export declare const ionCart: string;
export declare const ionCartOutline: string;
export declare const ionCheckbox: string;
export declare const ionCheckboxOutline: string;
export declare const ionCheckmark: string;
export declare const ionCheckmarkCircle: string;
export declare const ionCheckmarkCircleOutline: string;
export declare const ionCheckmarkOutline: string;
export declare const ionChevronBack: string;
export declare const ionChevronBackCircle: string;
export declare const ionChevronBackCircleOutline: string;
export declare const ionChevronBackOutline: string;
export declare const ionChevronDown: string;
export declare const ionChevronDownCircle: string;
export declare const ionChevronDownCircleOutline: string;
export declare const ionChevronDownOutline: string;
export declare const ionChevronForward: string;
export declare const ionChevronForwardCircle: string;
export declare const ionChevronForwardCircleOutline: string;
export declare const ionChevronForwardOutline: string;
export declare const ionChevronUp: string;
export declare const ionChevronUpCircle: string;
export declare const ionChevronUpCircleOutline: string;
export declare const ionChevronUpOutline: string;
export declare const ionClose: string;
export declare const ionCloseCircle: string;
export declare const ionCloseCircleOutline: string;
export declare const ionCloseOutline: string;
export declare const ionCog: string;
export declare const ionCogOutline: string;
export declare const ionDownload: string;
export declare const ionDownloadOutline: string;
export declare const ionDuplicate: string;
export declare const ionDuplicateOutline: string;
export declare const ionEye: string;
export declare const ionEyeOff: string;
export declare const ionEyeOffOutline: string;
export declare const ionEyeOutline: string;
export declare const ionHeart: string;
export declare const ionHeartOutline: string;
export declare const ionHome: string;
export declare const ionHomeOutline: string;
export declare const ionInformationCircle: string;
export declare const ionInformationCircleOutline: string;
export declare const ionInformationOutline: string;
export declare const ionMail: string;
export declare const ionMailOutline: string;
export declare const ionMenu: string;
export declare const ionMenuOutline: string;
export declare const ionNotifications: string;
export declare const ionNotificationsOutline: string;
export declare const ionPerson: string;
export declare const ionPersonOutline: string;
export declare const ionPlay: string;
export declare const ionPlayCircle: string;
export declare const ionPlayCircleOutline: string;
export declare const ionPlayOutline: string;
export declare const ionRemove: string;
export declare const ionRemoveCircle: string;
export declare const ionRemoveCircleOutline: string;
export declare const ionRemoveOutline: string;
export declare const ionSearch: string;
export declare const ionSearchOutline: string;
export declare const ionSettings: string;
export declare const ionSettingsOutline: string;
export declare const ionShare: string;
export declare const ionShareOutline: string;
export declare const ionStar: string;
export declare const ionStarOutline: string;
export declare const ionTrash: string;
export declare const ionTrashOutline: string;
export declare const ionWarning: string;
export declare const ionWarningOutline: string;
// ... hundreds more icons

Usage Examples:

import { 
  ionHome, 
  ionHomeOutline,
  ionPerson, 
  ionPersonOutline,
  ionSettings,
  ionSettingsOutline,
  ionAdd,
  ionAddOutline,
  ionTrash,
  ionTrashOutline
} from "@quasar/extras/ionicons-v8";

// Use with Quasar QIcon
<template>
  <q-icon :name="homeIcon" />
  <q-btn :icon="addIcon" color="primary" />
  <q-btn :icon="editIcon" flat round />
  <q-btn :icon="deleteIcon" color="negative" />
</template>

<script>
export default {
  data() {
    return {
      homeIcon: ionHome,
      homeOutlineIcon: ionHomeOutline,
      personIcon: ionPerson,
      addIcon: ionAdd,
      addOutlineIcon: ionAddOutline,
      settingsIcon: ionSettings,
      deleteIcon: ionTrash,
      trashOutlineIcon: ionTrashOutline
    };
  }
}
</script>

Ionicons v7

Ionicons v7.4.0 for compatibility with recent Ionic versions.

/**
 * Ionicons v7 SVG exports - similar structure to v8
 */
export declare const ionHome: string;
export declare const ionHomeOutline: string;
export declare const ionPerson: string;
export declare const ionPersonOutline: string;
export declare const ionSettings: string;
export declare const ionSettingsOutline: string;
export declare const ionAdd: string;
export declare const ionAddOutline: string;
export declare const ionRemove: string;
export declare const ionRemoveOutline: string;
export declare const ionClose: string;
export declare const ionCloseOutline: string;
export declare const ionCheckmark: string;
export declare const ionCheckmarkOutline: string;
// ... more v7 icons

Ionicons v6

Ionicons v6.1.3 for compatibility with Ionic v6 projects.

/**
 * Ionicons v6 SVG exports
 */
export declare const ionHome: string;
export declare const ionHomeOutline: string;
export declare const ionPerson: string;
export declare const ionPersonOutline: string;
export declare const ionSettings: string;
export declare const ionAdd: string;
export declare const ionRemove: string;
export declare const ionClose: string;
export declare const ionCheckmark: string;
// ... more v6 icons

Ionicons v5

Ionicons v5.5.4 for compatibility with Ionic v5 projects.

/**
 * Ionicons v5 SVG exports - first version to go SVG-only
 */
export declare const ionHome: string;
export declare const ionHomeOutline: string;
export declare const ionPerson: string;
export declare const ionPersonOutline: string;
export declare const ionSettings: string;
export declare const ionAdd: string;
export declare const ionRemove: string;
export declare const ionClose: string;
export declare const ionCheckmark: string;
// ... more v5 icons

Ionicons v4 (Legacy Webfont)

Ionicons v4.6.3 - the last version to include webfonts.

/**
 * Ionicons v4 SVG exports - legacy version with webfont support
 */
export declare const ionHome: string;
export declare const ionPerson: string;
export declare const ionSettings: string;
export declare const ionAdd: string;
export declare const ionRemove: string;
export declare const ionClose: string;
export declare const ionCheckmark: string;
// ... more v4 icons

Webfont Usage (v4 Only)

Note: Ionicons v5+ no longer provide webfonts - only SVG icons are available.

CSS Import (v4 Only)

/* Only available for Ionicons v4 */
@import '@quasar/extras/ionicons-v4/ionicons-v4.css';

HTML Usage (v4 Only)

<!-- Ionicons v4 webfont usage -->
<i class="ion ion-home"></i>
<i class="ion ion-person"></i>
<i class="ion ion-settings"></i>
<i class="ion ion-plus"></i>
<i class="ion ion-minus"></i>
<i class="ion ion-close"></i>

<!-- iOS-specific variants -->
<i class="ion ion-ios-home"></i>
<i class="ion ion-ios-person"></i>
<i class="ion ion-ios-settings"></i>

<!-- Material Design variants -->  
<i class="ion ion-md-home"></i>
<i class="ion ion-md-person"></i>
<i class="ion ion-md-settings"></i>

<!-- Logo icons -->
<i class="ion ion-logo-apple"></i>
<i class="ion ion-logo-google"></i>
<i class="ion ion-logo-facebook"></i>

QIcon Usage (v4 Only)

<!-- With Quasar QIcon component -->
<q-icon name="ion-home" />
<q-icon name="ion-ios-person" />
<q-icon name="ion-md-settings" />
<q-icon name="ion-logo-apple" />

Icon Styles and Variants

Filled vs Outlined

Most Ionicons come in two variants:

  • Filled: Default solid style (e.g., ionHome)
  • Outlined: Outlined style (e.g., ionHomeOutline)

Platform-Specific (v4 Only)

Ionicons v4 provided platform-specific variants:

  • ios-: iOS-styled icons optimized for iOS design patterns
  • md-: Material Design-styled icons for Android
  • logo-: Brand and logo icons

Version Evolution

  • v8: Latest with newest designs and optimizations
  • v7: Recent version with good icon coverage
  • v6: Stable version for Ionic v6 compatibility
  • v5: First SVG-only version, no webfonts
  • v4: Last version with webfont support, platform-specific variants

Icon Naming Convention

SVG Export Names

  • Prefix: ion (e.g., ionHome, ionPerson)
  • CamelCase after prefix
  • Outlined variants end with Outline (e.g., ionHomeOutline)

Webfont Class Names (v4 Only)

  • Two-class system: ion + icon name
  • Icon names with prefixes: ion-, ion-ios-, ion-md-, ion-logo-
  • Dash-separated names (e.g., ion-home, ion-ios-person, ion-logo-apple)

SVG Format

Ionicons SVG exports use the standard format:

Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 512 512')

Most Ionicons use a 512x512 viewBox for crisp rendering at various sizes.

Install with Tessl CLI

npx tessl i tessl/npm-quasar--extras

docs

additional-icons.md

animations.md

fontawesome.md

index.md

ionicons.md

material-icons.md

mdi.md

roboto-font.md

tile.json