/quasar-extras-svg-icons

Extra SVG icons for Quasar Framework

Primary LanguageJavaScriptMIT LicenseMIT

Quasar Framework logo

Quasar Framework - Extras SVG Icons package

Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!

quasar-extras-svg-icons

Join the chat at https://chat.quasar.dev

Installation

npm install quasar-extras-svg-icons

# or

yarn add quasar-extras-svg-icons

Why?

Why this package? Because it strips down unnecessary package files (so faster download times), all in one place, tested and ready to use with Quasar. One other reason is that this package complements the @quasar/extras package by adding additional SVG Icons that you can use in your Quasar apps. These SVG icons have gone though a process known as flattening. As mentioned, it strips out unnecessay code to make them smaller and more efficient. Unfortunately, not all icon sets meet this criteria and fail.

Additonally, most icon sets have fixed colors. Our flattening process also includes the ability to change these colors to 'currentColor' so you have more control over the way the icon looks when you use our icon sets. Of course, this doesn't apply to some icons sets where the fixed colors are mandatory (like flags). In some cases, we have created a "two-tone" icon set by not only employing the 'currentColor', but then also using 'currentColor' with an opacity in the same icon.

Many of the icon sets are not installable via NPM or NPM version does not coincide with GitHub version (out of sync), so this may be the only way to access them without bloating your project.

Plus, Typescript type definition files are generated so you won't get any warnings when using the icons.

Additionally, everytime there is a major release of an Icon Set, we preserve the previous 2 versions for a total of 3 versions.

Contents

Please make sure you have latest quasar-extras-svg-icons npm package version installed into your project folder in order for you to benefit from everything below.

Documentation

You can find the latest documentation at quasar-extras-svg-icons.netlify.app

SVG

Quasar v1.7+ required for svg Quasar Icon Sets.

Vendor Version Import SVG Icons as Prefix License
Akar Icons 1.9.28 quasar-extras-svg-icons/akar-icons akar License
Ant Design Icons 4.3.1 quasar-extras-svg-icons/ant-design-icons antOutlined, antFilled, antTwoTone License
Box Icons 2.1.4 quasar-extras-svg-icons/box-icons bx, bxl, bxs License
Brand Icons 2.0.0 quasar-extras-svg-icons/brand-icons brnd License
Brandico Icons 0.0.0 quasar-extras-svg-icons/brandico-icons brico License
Bytesize Icons 1.4.0 quasar-extras-svg-icons/bytesize-icons byte License
Carbon Icons 11.30.1 quasar-extras-svg-icons/carbon-icons-v11 carbon License
Carbon Icons 10.48.0 quasar-extras-svg-icons/carbon-icons carbon License
Carbon Pictograms 12.26.1 quasar-extras-svg-icons/carbon-pictograms-v12 carpic License
Carbon Pictograms 11.24.0 quasar-extras-svg-icons/carbon-pictograms carpic License
Clarity Icons (@cds/core) v6 6.9.0 quasar-extras-svg-icons/clarity-icons-v6 clarity License
Clarity Icons (@cds/core) 5.7.1 quasar-extras-svg-icons/clarity-icons clarity License
Codicons (vscode) 0.0.35 quasar-extras-svg-icons/condicons codi License
Cool Icons 2.5.0 quasar-extras-svg-icons/cool-icons cool License
CoreUI Icons 3.0.1 quasar-extras-svg-icons/coreui-icons-v3 cui, cib, cif License
CoreUI Icons 2.1.0 quasar-extras-svg-icons/coreui-icons cui, cib, cif License
Country Flag Icons 1.5.9 quasar-extras-svg-icons/country-flag-icons flag License
Dashicons 0.9.0 quasar-extras-svg-icons/dashicons dash License
Devicons 1.8.0 quasar-extras-svg-icons/dev-icons dev License
Drip Icons 2.0.0 quasar-extras-svg-icons/drip-icons drip License
Elusive Icons 1.10.1 quasar-extras-svg-icons/elusive-icons eli License
Entypo+ Icons 2.2.1 quasar-extras-svg-icons/entypo-icons entypo License
Evil Icons 1.10.1 quasar-extras-svg-icons/evil-icons ei License
Feather Icons 4.29.1 quasar-extras-svg-icons/feather-icons feather License
Flat Color Icons (Icons8) 1.1.0 quasar-extras-svg-icons/flat-color-icons fci License
FlatUI Icons 1.4.0 quasar-extras-svg-icons/flatui-icons flat License
Fluent UI System Icons 1.1.223 quasar-extras-svg-icons/fluentui-system-icons fui License
Fontisto Icons 3.0.4 quasar-extras-svg-icons/fontisto-icons fontisto License
Foundation Icons 0.1.1 quasar-extras-svg-icons/foundation-icons fi License
Geom Icons 3.0.0-beta.1 quasar-extras-svg-icons/grid-icons geom License
GitLab Icons v3 3.71.0 quasar-extras-svg-icons/gitlab-icons-v3 gitlab License
GitLab Icons 2.33.0 quasar-extras-svg-icons/gitlab-icons gitlab License
Glyphs Brands v0.1.9 quasar-extras-svg-icons/glyphs-brands glyphsBrandsThin, glyphsBrandsSolid License
Glyphs Core Icons v0.8.12 quasar-extras-svg-icons/glyphs-core-icons glyphsCoreBold, glyphsCoreDuo, glyphsCoreOutline, glyphsCoreThin, glyphsCorePoly License
Grid Icons 3.4.0 quasar-extras-svg-icons/grid-icons gridicons License
Health Icons 0.1.0 quasar-extras-svg-icons/health-icons health License
Hero Icons v2 2.0.18 quasar-extras-svg-icons/hero-icons-v2 heroOutline, heroSolid License
Hero Icons 1.0.6 quasar-extras-svg-icons/hero-icons heroOutline, heroSolid License
Icomoon Free Icons 0.0.0 quasar-extras-svg-icons/icomoon-free-icons icomoonFree License
Iconoir Icons v7 7.0.3 quasar-extras-svg-icons/iconoir-icons-v7 ico License
Iconoir Icons v6 6.11.0 quasar-extras-svg-icons/iconoir-icons-v6 ico License
Iconoir Icons v5 5.5.2 quasar-extras-svg-icons/iconoir-icons-v5 ico License
IconPark Icons 1.0.0 quasar-extras-svg-icons/iconpark-icons ip License
IconPark Icons 1.0.0 quasar-extras-svg-icons/iconpark-icons ip License
Ikonate 1.1.1 quasar-extras-svg-icons/ikonate ikonate License
Ikons 0.0.0 quasar-extras-svg-icons/ikons ikons License
Jam Icons 2.0.0 quasar-extras-svg-icons/jam-icons jam License
Keyrune Icons 3.13.1 quasar-extras-svg-icons/keyrune-icons keyrune License
Linear Icons 1.0.2 quasar-extras-svg-icons/linear-icons lnr License
Linecons 0.0.0 quasar-extras-svg-icons/linecons lcons License
Maki Icons (Mapbox) v8 8.0.1 quasar-extras-svg-icons/maki-icons-v8 maki License
Maki Icons (Mapbox) 7.1.0 quasar-extras-svg-icons/maki-icons maki License
Map Icons 3.0.3 quasar-extras-svg-icons/map-icons map License
Material Line Icons 0.2.19 quasar-extras-svg-icons/material-line-icons matLine License
Material Theme Icons v3 3.2.0 quasar-extras-svg-icons/material-theme-icons-v3 mti License
Material Theme Icons 2.7.5 quasar-extras-svg-icons/material-theme-icons mti License
Modern Icons 0.0.0 quasar-extras-svg-icons/modern-icons modern License
Octicons (Primer) v19 19.8.0 quasar-extras-svg-icons/oct-icons-v19 oct License
Octicons (Primer) v18 18.3.0 quasar-extras-svg-icons/oct-icons-v18 oct License
Octicons (Primer) v17 17.11.1 quasar-extras-svg-icons/oct-icons-v17 oct License
Open Iconic 1.1.1 quasar-extras-svg-icons/open-iconic oi License
Openmoji Icons 14.0.0 quasar-extras-svg-icons/openmoji-icons-v14 om, omc License
Openmoji Icons 13.1.0 quasar-extras-svg-icons/openmoji-icons om, omc License
Phosphor Icons v2 2.0.3 quasar-extras-svg-icons/phosphor-icons-v2 pp License
Phosphor Icons 1.4.2 quasar-extras-svg-icons/phosphor-icons pp License
Pixelart Icons 1.7.0 quasar-extras-svg-icons/pixelart-icons pix License
Prime Icons 6.0.1 quasar-extras-svg-icons/prime-icons-v6 prime License
PrimeIcons 5.0.0 quasar-extras-svg-icons/prime-icons prime License
Radix-UI Icon 1.3.0 quasar-extras-svg-icons/radix-ui-icons radix License
Remix Icon 3.6.0 quasar-extras-svg-icons/remix-icons-v3 rem License
Remix Icon 2.5.0 quasar-extras-svg-icons/remix-icons rem License
Simple Icons v10 10.0.0 quasar-extras-svg-icons/simple-icons-v10 sim License
Simple Icons v9 9.19.1 quasar-extras-svg-icons/simple-icons-v9 sim License
Simple Icons v8 8.14.0 quasar-extras-svg-icons/simple-icons-v8 sim License
Simple Line Icons 2.5.5 quasar-extras-svg-icons/simple-line-icons sli License
Stroke 7 Icons (Pixeden) 1.2.3 quasar-extras-svg-icons/stroke7-icons strk7 License
Subway Icons 0.0.0 quasar-extras-svg-icons/subway-icons sub License
System UIcons 0.0.0 quasar-extras-svg-icons/system-uicons sui License
Tabler Icons 2.42.0 quasar-extras-svg-icons/tabler-icons-v2 tab, tabBrand License
Tabler Icons 1.119.0 quasar-extras-svg-icons/tabler-icons tab, tabBrand License
Teeny Icons 0.4.1 quasar-extras-svg-icons/teeny-icons teenyOutline, teenySolid License
Typicons 2.1.2 quasar-extras-svg-icons/typ-icons typ License
UIW Icons 2.6.18 quasar-extras-svg-icons/uiw-icons uiw License
Unicons 4.0.8 quasar-extras-svg-icons/unicons uni, uniSolid, uniThin License
Vaadin Icons v24 24.2.4 quasar-extras-svg-icons/vaadin-icons-v24 vaadin License
Vaadin Icons v23 23.3.7 quasar-extras-svg-icons/vaadin-icons-v23 vaadin License
Vaadin Icons 22.0.6 quasar-extras-svg-icons/vaadin-icons vaadin License
Weather Icons 2.0.12 quasar-extras-svg-icons/weather-icons wi License
Webfont Medical Icons 1.0.0 quasar-extras-svg-icons/webfont-medical-icons wmed License
Windows Icons 0.0.0 quasar-extras-svg-icons/windows-icons appbar License
Zond Icons 1.2.0 quasar-extras-svg-icons/zond-icons zond License

Example (with Vue Composition API):

// some .vue file in devland
<template>
  <div>
    <q-icon :name="tabMenu" />
    <q-btn :icon="pixCalendarMonth" />
  </div>
</template>

<script>
import { tabMenu } from 'quasar-extras-svg-icons/tabler-icons'
import { pixCalendarMonth } from 'quasar-extras-svg-icons/pixelart-icons'

export default {
  // ...
  setup () {
    return {
      tabMenu
      pixCalendarMonth
    }
  }
}

Example (with Vue Options API):

// some .vue file in devland
<template>
  <div>
    <q-icon :name="tabMenu" />
    <q-btn :icon="remBug" />
  </div>
</template>

<script>
import { tabMenu } from 'quasar-extras-svg-icons/tabler-icons'
import { remBug } from 'quasar-extras-svg-icons/remix-icons'

export default {
  // ...
  created () {
    this.tabMenu = tabMenu
    this.remBug = remBug
  }
}

SVG name format

Svg icons will be defined as String with the following syntax:

Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')
Examples:
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 24 24
  M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z

A more complex example with attributes, would look like this:

M3 12H6L9 3L15 21L18 12H21@@stroke-width:1.5;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;

Known Issues

  • box-icons: (FIXED) There are two icons, boxBxsDroplet and boxBxsHot, that both use the svg use directive. Our parser cannot handle that, so these icons will be displayed as a black square.

  • country-flag-icons is missing the South Korean flag as the SVG uses clip-path which our parser at this time cannot handle.

  • health-icons:

    • has a !,svg filename which doesn't translate well to a valid JavaScript variable name, so it is renamed to ExclamationMark as they already have a QuestionMark (because you can't have ? in a filename).
    • A number of icons, like healthFilledConeTestOnNets and healthOutlineRuralPost, look messed up and there is no way to fix them at this time. Use at your own risk, or use the original icon.
  • modern-icons is mssing the SVG for modernBattery30

  • coreui-icons icons not available because of mask and use directives (cannot be flattened): cuiCifAu, cuiCifBi, cuiCifBr, cuiCifEg, cuiCifJm, cuiCifKg, cuiCifKn, cuiCifMr, cuiCifNa, cuiCifNz, cuiCifPt, cuiCifSb, cuiCifSk, cuiCifTv, cuiCifTz, and cuiCifZa.

  • flatui-icons icons not available because of ClipPath and mask (cannot be flattened): flatArt, flatBowling, flatBrush, flatButton, flatCard, flatDynamite, flatFlask, flatRetina, flatRing, flatSafe, flatSkateboard, flatSpray, flatTouch, flatTrash, flatWeather, flatWine.

  • glyphs-brands the color brands are not available because of LinearGradient, RadialGradient, etc (cannot be flattened).

  • glyphs-flags are not available because of LinearGradient, RadialGradient, etc (cannot be flattened).

  • clarity-icons does not include the alerted or badged icons as they don't make sense when being used in this context.

  • openmoji: we are excluding the black svg icons for a number of reasons. The main one is that they are stripped down versions of the color icons, but while those ones have approximately 5 icons representing skin color, the black icons are not filled in and look the same. This adds unnecessary bulk to our distribution.

  • material-theme-icons: two icons not available because of mask and LinearGradient (cannot be flattened): mtiCargoLock and mtiFlash.

  • map-icons icons not available because of malformed SVG: mapBicycling, mapFishing, mapGolf, mapHorseRiding, mapMotobikeTrail, mapTrailWalking, mapViewing, mapWalking

Missing Icon Packages?

We have tried to include some of the most popular and current SVG icon packages available. If you find a package you think should be here, do add a feature request in the issues section.

Also, we did try to add a LOT of other packages, but there were reasons why some of them could not be included:

  1. The SVG icon set includes color and/or duo-tone icons. Quasar uses the css currentColor to determine color, so these icons would have had the color stripped out.
  2. Even though a package has a GitHub repo with SVG icons, their NPM package was missing the SVG icons. Instead, they were just distributing the WOFF and WOFF2 fonts that comprised of the icons. If you find one like this, let them know that they should also distribute the SVG icons.
  3. The SVG uses commands, like use, LinearGradient, filter, etc., which cannot be integreted into the Quasar Framework format.

Before making a feature request, install the package you feel should be included into this package and check out if the above criteria will fit the needs of our parser.

Icon sets that fail:

  • Majesticons: They use transform to make circles.
  • Lucide: Not true SVG. Requires a browser to create the SVGs.
  • material-icon-theme: Issues with arduino, denizenscript, folder-docker, and pascal.
  • cryptocurrency-icons: Lots of use and filter directives.
  • paper-icon-theme: Use linearGradient
  • css-social-buttons (Zocial): viewBox is incorrect in many icons causing cut-off points.
  • icon-park: too many different colors. Not suitable for dark theme or inverted color themes.
  • noto-emoji: Uses linerarGradient
  • region-flags: Uses linerarGradient and use
  • ardis-icon-theme: Uses text
  • breeze-icons: Uses LinearGradient
  • adwaita-icon-theme: Uses LinearGradient and ClipPath
  • super-tiny-icons: Uses use

Building this Package

For installation, use:

yarn --ignore-engines

Then run:

yarn build

Donate

If you appreciate the work that went into this project, please consider donating to Quasar or Jeff.

Documentation

Head on to the website: quasar-extras-svg-icons

Stay in Touch

For latest releases and announcements, follow on Twitter: @jgalbraith64

Chat Support

Ask questions at the official community Discord server: https://chat.quasar.dev

License

All assets included in this repository are exclusive property of their respective owners and licensed under their own respective licenses. Quasar does not take any credit for packages included here.