@exawizards/exabase-design-system-icons

1.3.0 • Public • Published

exaBase Design System Icons

exaBase Design System Icons is a collection of generic, simple and neutrally designed icons that is free for personal and commercial use.

Browse Icons

Install

npm

Install icons from npm - including SVGs, icon fonts and CSS files.

npm i @exawizards/exabase-design-system-icons

Then import CSS to your Javascript file.

import "@exawizards/exabase-design-system-icons/font/exabase-design-system-icons.css";

CDN

Download icon font files from CDN by including them in the <head> of your web page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exawizards/exabase-design-system-icons@1.3.0/font/exabase-design-system-icons.css" />

Usage

Embedded

The quickest way to use icons is to copy the SVG code of the icon you need and inline it directly into your HTML. You can get the SVG code by clicking on the icon on this page.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32" fill="#000000">
  <path d="M16.0001 28C16.2653 28 16.5196 27.8946 16.7072 27.7071L27.7102 16.7041C28.1007 16.3136 28.1007 15.6804 27.7102 15.2899C27.3196 14.8994 26.6865 14.8994 26.2959 15.2899L17.0001 24.5858L17.0001 5C17.0001 4.44772 16.5523 4 16.0001 4C15.4478 4 15.0001 4.44772 15.0001 5L15.0001 24.5858L5.70418 15.2899C5.31365 14.8994 4.68049 14.8994 4.28996 15.2899C3.89944 15.6804 3.89944 16.3136 4.28996 16.7041L15.2929 27.7071C15.4805 27.8946 15.7348 28 16.0001 28Z"/>
</svg>

The size can be changed with the width and height attributes, and the color can be changed with the fill attribute.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32" fill="#1400c8">
  <path d="M16.0001 28C16.2653 28 16.5196 27.8946 16.7072 27.7071L27.7102 16.7041C28.1007 16.3136 28.1007 15.6804 27.7102 15.2899C27.3196 14.8994 26.6865 14.8994 26.2959 15.2899L17.0001 24.5858L17.0001 5C17.0001 4.44772 16.5523 4 16.0001 4C15.4478 4 15.0001 4.44772 15.0001 5L15.0001 24.5858L5.70418 15.2899C5.31365 14.8994 4.68049 14.8994 4.28996 15.2899C3.89944 15.6804 3.89944 16.3136 4.28996 16.7041L15.2929 27.7071C15.4805 27.8946 15.7348 28 16.0001 28Z"/>
</svg>

External image

Put the icon SVG files to your directory and reference them with the <img> element.

<img src="/assets/img/arrow.svg" alt="" width="24" height="24" />

Icon font

After importing the CSS file into your website using one of the ways described in Install, copy and paste the HTML code for the icon you want into your HTML. You can get the HTML code by clicking on the icons on the icons page.

<i class="ei ei-bookmark-fill"></i>

Size and color can be changed by font-size and color with custom CSS.

<i class="ei ei-bookmark-fill" style="font-size: 16px; color: #1400c8;"></i>

License

exaBase Design System Icons is licensed under the MIT License.

©️ ExaWizards Inc.

Readme

Keywords

Package Sidebar

Install

npm i @exawizards/exabase-design-system-icons

Weekly Downloads

107

Version

1.3.0

License

MIT

Unpacked Size

546 kB

Total Files

533

Last publish

Collaborators

  • exwzd
  • ewadmin