README (README.md) Copy Section

VvvebJs

<p align="center">
<img src="https://www.vvveb.com/admin/themes/default/img/biglogo.png" alt="Vvveb">
<br><br>
<strong>Drag and drop page builder javascript library.</strong>
<br>
<span>Built with Vanilla Js with no dependencies or build tools and Bootstrap 5</span>
</p>
<p align="center">
<a href="https://www.vvveb.com">Website</a> |
<a href="https://github.com/givanz/VvvebJs/wiki">Documentation</a> |
<a href="https://github.com/givanz/VvvebJs/discussions">Forum</a> |
<a href="https://twitter.com/vvvebcms">Twitter</a>
</p>

Live Demo Live Demo')" title="Copy chapter prompt for LLMs"> Copy Chapter

For a full featured Open Source CMS using VvvebJs page builder check Vvveb CMS

Using Vvveb landing page template for demo page and Bootstrap 5 sections and blocks.

<img src="https://www.vvveb.com/img/dark-theme.png">
<img src="https://www.vvveb.com/img/light-theme.png">

Features Copy Section

* Components and blocks/snippets drag and drop and in page insert.
* Undo/Redo operations.
* One or two panels interface.
* File manager and component hierarchy navigation.
* Add new page modal with template and folder options.
* Live code editor with codemirror plugin syntax highlighting.
* Image upload with example php script included.
* Page download or export html or save page on server with example php script included.
* Components/Sections/Blocks list search.
* Bootstrap 5 components.
* Media gallery with integrated CC0 image search and server upload support.
* Image, video and iframe elements resize handles.
* Elements breadcrumb for easier parent elements selection.
* Full Google fonts list support for font selection.
* Youtube, Google maps, Charts.js etc widgets.
* Optional CKEditor plugin to replace builtin text editor.
* Zip download plugin to download the page and all assets as zip file.
* SVG Icon component bundled with hundreds of free icons.
* Animate on scroll support for page elements.
* Theme global typography and color pallette editor.

By default the editor comes with Bootstrap 5 and Widgets components and can be extended with any kind of components and inputs.

Install Copy Chapter

* Clone the repository

#git 2.13+ 
git clone --recurse-submodules https://github.com/givanz/VvvebJs
older git versions 

git clone --recursive https://github.com/givanz/VvvebJs

* Pull changes

git pull --recurse-submodules

Usage Copy Chapter

Clone the repository or download a release then open editor.html

Because of browser iframe security you need to use a webserver such as apache/xampp and open http://localhost/editor.html

To disable browser security and open editor.html without installing a webserver run chrome with

chrome --disable-web-security --user-data-dir=/tmp/temporary_profile editor.html

To use the image upload or page save feature you need to have php installed.

Docker Copy Chapter

Local development Copy Section

From VvvebJs folder run

docker-compose up

Image Copy Section

Or run image

docker run -p 8080:80 vvveb/vvvebjs

Open http://localhost:8080/editor.php or http://localhost:8080/editor.html

Save page Copy Chapter

Save page function needs either php or node

PHP Copy Section

If you use docker, xampp or a shared hosting account php should work without any change.

Saving is done using save.php

Node Copy Section

For node go to VvvebJs folder and run

npm install express
node save.js

Open http://localhost:8080/editor.html

Saving is done using save.js

Landing template Landing template')" title="Copy chapter prompt for LLMs"> Copy Chapter

To make changes to template files or sections run the following commands from demo/landing folder

Install gulp Copy Section

npm i

Generate html files Copy Section

Template html partials are located in demo/landing/src folder.

npm run gulp

Watch for changes for development Copy Section

npm run gulp watch

Generate sections list for page builder Copy Section

Sections html files are located in demo/landing/src/sections folder grouped in folders with the section group name.

npm run gulp sections

Generate blocks list Copy Section

Blocks html files are located in demo/landing/src/blocks folder grouped in folders with the blocks group name.

npm run gulp blocks

Generate screenshots for sections Copy Section

npm run gulp screenshots

Usage Copy Chapter

Initialize example Copy Section

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script src="libs/builder/builder.js"></script>	
<script src="libs/builder/undo.js"></script>	
<script src="libs/builder/inputs.js"></script>	
<script src="libs/builder/components-bootstrap5.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	
<script>
let pages = [
 {
	name:"narrow-jumbotron", 
	title:"Jumbotron", 
	url: "demo/narrow-jumbotron/index.html", 
	file: "demo/narrow-jumbotron/index.html"
  },
  {name:"landing-page", title:"Landing page", url: "demo/landing/index.html", file: "demo/landing/index.html"},
];
	
let firstPage = Object.keys(pages)[0];
Vvveb.Builder.init(pages[firstPage]["url"], function() {
	//load code after page is loaded here
});
Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();
<script>

For editor html and components/input javascript templates edit editor.html

For css changes edit scss/editor.scss and scss/_builder.scss

Scss Copy Section

To compile scss to css first install gulp

npm i

Then you can run

npm run gulp

or use watch to compile on file change.

npm run gulp watch

Wrappers Copy Chapter

* React VvvebJs React wrapper

Documentation Copy Chapter

For documentation check the wiki

Support Copy Chapter

If you like the project you can support it with a PayPal donation or become a backer/sponsor via Open Collective

<a href="https://opencollective.com/vvvebjs/sponsors/0/website"><img src="https://opencollective.com/vvvebjs/sponsors/0/avatar"></a>
<a href="https://opencollective.com/vvvebjs/backers/0/website"><img src="https://opencollective.com/vvvebjs/backers/0/avatar"></a>

License Copy Chapter

Apache 2.0

---

Credits (Credits.md) Copy Section

Credits

SVG icons Copy Chapter

---

Docker Compose.Yml (docker-compose.yml) Copy Section

sudo apt install docker-compose

sudo docker-compose up -d

---

Package.Json (package.json) Copy Section

{
"name": "vvvebjs",
"description": "Drag and drop website builder javascript library",
"version": "0.0.1",
"author": "Ziadin Givan",
"license": "Apache-2.0",
"homepage": "https://www.vvveb.com/vvvebjs/editor.html",
"main": "libs/builder/builder.js",
"repository": {
"type": "git",
"url": "https://github.com/givanz/VvvebJs.git"
},
"dependencies": {
"express": "^4.19.2"
},
"keywords": [
"vvvebjs",
"drag-drop",
"drag&drop",
"drag",
"drop",
"wysiwyg",
"web",
"template",
"editor",
"site",
"builder"
],
"scripts": {
"gulp": "gulp",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"gulp": "^4.0.2",
"gulp-file-include": "^2.3.0",
"gulp-format-html": "^1.2.5",
"gulp-sass": "^5.1.0",
"node-sass": "^8.0.0",
"sass": "^1.60.0"
}
}

---

Resources/Svg/Icons/150 Outlined Icons/Readme (resources/svg/icons/150-outlined-icons/readme.txt) Copy Section

https://freebiesbug.com/psd-freebies/150-free-outlined-icons-psd-ai-svg-webfont/

---

Resources/Svg/Icons/77 Essential Icons/Readme (resources/svg/icons/77_essential_icons/readme.txt) Copy Section

77 Essential Icons, a free icon set designed by Bryn Taylor. Distributed under Creative Commons Attribution license.
https://dribbble.com/shots/1934932-77-Essential-Icons-Free-Download

---

Resources/Svg/Icons/Ant Design Icons/README (resources/svg/icons/ant-design-icons/README.md) Copy Section

<p align="center">
<img
width="450px" alt="logo" src="https://user-images.githubusercontent.com/15819224/45196822-c120ff00-b290-11e8-83ca-eb76378f5cc1.png" />
</p>

<p align="center">
⭐ The abstract trees of the Ant Design SVG icons.
</p>

<div align="center">

[![CircleCI status][circleci-image]][circleci-url]
[](https://lernajs.io/)

[circleci-image]: https://img.shields.io/circleci/build/github/ant-design/ant-design-icons/master?style=flat-square
[circleci-url]: https://circleci.com/gh/ant-design/ant-design-icons
</div>

Packages Copy Chapter

Contribution Guides 贡献指南 Copy Chapter

- @ant-design/icons-svg: English ｜ 中文

License Copy Chapter

MIT License

---

Resources/Svg/Icons/Boxicons/README (resources/svg/icons/boxicons/README.md) Copy Section

boxicons

_High Quality web friendly icons_

'Boxicons' is a carefully designed open source iconset with 1500+ icons. It's crafted to look enrich your website/app experience.

_Announcing Boxicons v2.1.1!_

- Fixed the errors with a few svgs, added viewbox
- Added 30 new icons

Installation Copy Chapter

To install via npm, simply do the following:

$ npm install boxicons --save

import 'boxicons';

Usage Copy Chapter

Using via CSS Copy Section

1. Include the stylesheet on your document's <head>

<head>
  <link rel="stylesheet" href="boxicons.min.css">
</head>

Instead of installing you may use the remote version

<head>
  <link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  
  <link rel="stylesheet"
  href="https://unpkg.com/boxicons@latest/css/boxicons.min.css">
</head>

2. To use an icon on your page, add a class 'bx' and seperate class with the icons name with a prefix 'bx-' for regular icons , 'bxs-' for solid icons and 'bxl-' for logos:

<i class="bx bx-hot"></i>
<i class="bx bxs-hot"></i>
<i class="bx bxl-facebook-square"></i>

Using via Web Component Copy Section

Boxicons includes a Custom Element that makes using icons easy and efficient. To use it, add the box-icon-element.js file to the page:

<script src="https://unpkg.com/[email protected]/dist/boxicons.js"></script>

To use an icon, add the <box-icon> element to the location where the icon should be displayed:

<box-icon name="hot"></box-icon>

<box-icon type="solid" name="hot"></box-icon>
<box-icon type="logo" name="facebook-square"></box-icon>

<box-icon
    type = "regular|solid|logo"
    name="adjust|alarms|etc...."
    color="blue|red|etc..."
    size="xs|sm|md|lg|cssSize"
    rotate="90|180|270"
    flip="horizontal|vertical"
    border="square|circle"
    animation="spin|tada|etc..."
    pull = "left|right"
></box-icon>

- tagName: property that holds the HTML element tag name. Default: box-icon
- defined([tagName]): Defines the Element in the custom element registry using either the tagName provided on input or the (default) the one defined on the Class.
- cdnUrl: property that holds the URL that will be used to retrieve the images. URL should point to the folder that contains the images. example: //unpkg.com/[email protected]/svg (no trailing forward slash)
- getIconSvg(iconName): method used to retrieve the SVG image. Should return a Promise that resolves with the SVG source (String).

Check out all the icons here!

Contributors Copy Chapter

Code Contributors Copy Section

This project exists thanks to all the people who contribute. [Contribute].
<a href="https://github.com/atisawd/boxicons/graphs/contributors"><img src="https://opencollective.com/boxicons/contributors.svg?width=890&button=false" /></a>

Financial Contributors Copy Section

Become a financial contributor and help us sustain our community. [Contribute]

#### Individuals

<a href="https://opencollective.com/boxicons"><img src="https://opencollective.com/boxicons/individuals.svg?width=890"></a>

#### Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

<a href="https://opencollective.com/boxicons/organization/0/website"><img src="https://opencollective.com/boxicons/organization/0/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/1/website"><img src="https://opencollective.com/boxicons/organization/1/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/2/website"><img src="https://opencollective.com/boxicons/organization/2/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/3/website"><img src="https://opencollective.com/boxicons/organization/3/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/4/website"><img src="https://opencollective.com/boxicons/organization/4/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/5/website"><img src="https://opencollective.com/boxicons/organization/5/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/6/website"><img src="https://opencollective.com/boxicons/organization/6/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/7/website"><img src="https://opencollective.com/boxicons/organization/7/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/8/website"><img src="https://opencollective.com/boxicons/organization/8/avatar.svg"></a>
<a href="https://opencollective.com/boxicons/organization/9/website"><img src="https://opencollective.com/boxicons/organization/9/avatar.svg"></a>

License Copy Chapter

- The icons (.svg) files are free to download and are licensed under CC 4.0 By downloading it is assumed that you agree with the terms mentioned in CC 4.0.
- The fonts files are licensed under SIL OFL 1.1.
- Attribution is not required but is appreciated.
- Other files which are not fonts or icons are licensed under the MIT License.

You can read more about the license here!

Contributing Copy Chapter

Pull requests are the way to go here. I apologise in advance for the slow action on pull requests and issues.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

---

Resources/Svg/Icons/Clarity Icons/README (resources/svg/icons/clarity-icons/README.md) Copy Section

Clarity Assets

This repository is part of the Clarity project, and its purpose is to store the static assets that we provide for consumers of Clarity.

You are welcome to download the files from here, or you can find them listed our website https://clarity.design as well.

Contents Copy Section

icons contains the sets of icons from Clarity Icons
sketch contains the sketch files for designers crafting interfaces with Clarity

---

Resources/Svg/Icons/Clarity Icons/NOTICE (resources/svg/icons/clarity-icons/NOTICE.txt) Copy Section

Copyright (c) 2018 VMware, Inc.

This product is licensed to you under the MIT license (the "License"). You may not use this product except in compliance with the MIT License.

This product may include a number of subcomponents with separate copyright notices and license terms. Your use of these subcomponents is subject to the terms and conditions of the subcomponent's license, as noted in the LICENSE file.

---

Resources/Svg/Icons/Coreui Icons/README (resources/svg/icons/coreui-icons/README.md) Copy Section

<p align="center">
<img height="50" src="https://coreui.io/images/brands/coreui-icons.svg">
</p>

<p align="center">
<a href="https://www.npmjs.com/package/@coreui/icons">
<img alt="npm (scoped)" src="https://img.shields.io/npm/v/@coreui/icons">
</a>
<a href="https://www.npmjs.com/package/@coreui/icons">
<img alt="npm" src="https://img.shields.io/npm/dw/@coreui/icons">
</a>
</p>

CoreUI Icons (1500+ Free icons)- Simply beautiful open source icons

CoreUI Icons is an open-source icon set with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.

Table of Contents Copy Chapter

- CoreUI Icons (1500+ Free icons)- Simply beautiful open source icons
- Table of Contents
- Preview & Docs
- Installation
- CDN
- NPM
- Yarn
- Usage
- Basic Use
- SVG Sprites
- SVG Symbols
- CoreUI Icons for Angular
- CoreUI Icons for React.js
- CoreUI Icons for Vue.js
- CoreUI Icons PRO
- License
- CoreUI Icons Free Icons
- CoreUI Icons Brand and Flag Icons
- Brand Icons

Preview & Docs Copy Chapter

https://coreui.io/icons/

Installation Copy Chapter

CDN Copy Section

<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/all.min.css">

or

<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/free.min.css">
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/brand.min.css">
<link rel="stylesheet" href="https://unpkg.com/@coreui/icons/css/flag.min.css">

NPM Copy Section

npm install @coreui/icons --save

Yarn Copy Section

yarn add @coreui/icons

Or, you can also clone or download this repository as zip.

Usage Copy Chapter

Basic Use Copy Section

Please use cil- prefix for linear icons, cib- prefix for brand icons, and cif- prefix for flag icons.

<i class="cil-energy"></i>

<i class="cib-twitter"></i>

<i class="cif-us"></i>

SVG Sprites Copy Section

SVG sprites let you quickly use vector icons in your website. We have prepared all the icon set styles into their own SVG sprites.

Place sprite files with the rest of your static files, like images and styles, in your project. Make sure to add a proper path to the SVG sprite file, and use the fragment identifier specific to the SVG icon or symbol you want to display.

<svg>
  <use xlink:href="path/to/free.svg#cil-airplane-mode"></use>
</svg>
<svg>
  <use xlink:href="path/to/brand.svg#cib-twitter"></use>
</svg>
<svg>
  <use xlink:href="path/to/flag.svg#cif-us"></use>
</svg>

SVG Symbols Copy Section

When you download your icon set, it comes with a sprites directory that contains SVG icon definitions. These icons can be referenced and used as inline SVGs like so:

/ Detailed source-code truncated for AI context efficiency. /

It is also possible to link to an external SVG containing the definitions:

<svg class="icon-home">
  <use xlink:href="path/to/free.svg#cil-apple"></use>
</svg>

Referencing an external SVG has the advantage that your icons get cached, with one HTTP request. But the external SVG and the HTML should be served from the same domain. This approach works fine in modern browsers except for IE 9+. In order to support IE 9+, You should use /js/svgxuse.js or /js/svgxuse.min.js. This polyfill detects if the icons are loaded properly; if they aren't, it sends one HTTP request to fetch and cache symbol definitions.

<script defer src="https://unpkg.com/@coreui/icons/js/svgxuse.js"></script>

CoreUI Icons for Angular Copy Section

- Please check official repository CoreUI Icons for Angular

CoreUI Icons for React.js Copy Section

- Please check official repository CoreUI Icons for React

CoreUI Icons for Vue.js Copy Section

- Please check official repository CoreUI Icons for Vue.js

CoreUI Icons PRO Copy Chapter

If our free icon set is insufficient you can buy CoreUI Icons Pro with more than 2000 icons, and more styles - Solid, Duo-Tone and Linear.

License Copy Chapter

CoreUI Icons Free Icons Copy Section

CoreUI Icons Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.

- Icons — CC BY 4.0 License
- In the CoreUI Icons Free, the CC BY 4.0 license applies to all icons
packaged as .svg and .js files types.
- Fonts — SIL OFL 1.1 License
- In the CoreUI Icons Free, the SIL OLF license applies to all icons
packaged as web and desktop font files.
- Code — MIT License
- In the CoreUI Icons Free, the MIT license applies to all
non-font and non-icon files.

CoreUI Icons Brand and Flag Icons Copy Section

#### Brand Icons
All brand icons are trademarks of their respective owners. The use of these
trademarks does not indicate endorsement of the trademark holder by Font
Awesome, nor vice versa. Please do not use brand logos for any purpose except
to represent the company, product, or service to which they refer.

CC0 1.0 Universal
Statement of Purpose

The laws of most jurisdictions throughout the world automatically confer
exclusive Copyright and Related Rights (defined below) upon the creator and
subsequent owner(s) (each and all, an "owner") of an original work of
authorship and/or a database (each, a "Work").

Certain owners wish to permanently relinquish those rights to a Work for the
purpose of contributing to a commons of creative, cultural and scientific
works ("Commons") that the public can reliably and without fear of later
claims of infringement build upon, modify, incorporate in other works, reuse
and redistribute as freely as possible in any form whatsoever and for any
purposes, including without limitation commercial purposes. These owners may
contribute to the Commons to promote the ideal of a free culture and the
further production of creative, cultural and scientific works, or to gain
reputation or greater distribution for their Work in part through the use and
efforts of others.

For these and/or other purposes and motivations, and without any expectation
of additional consideration or compensation, the person associating CC0 with a
Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
and publicly distribute the Work under its terms, with knowledge of his or her
Copyright and Related Rights in the Work and the meaning and intended legal
effect of CC0 on those rights.

1. Copyright and Related Rights. A Work made available under CC0 may be
protected by copyright and related or neighboring rights ("Copyright and
Related Rights"). Copyright and Related Rights include, but are not limited
to, the following:

i. the right to reproduce, adapt, distribute, perform, display, communicate,
and translate a Work;

ii. moral rights retained by the original author(s) and/or performer(s);

iii. publicity and privacy rights pertaining to a person's image or likeness
depicted in a Work;

iv. rights protecting against unfair competition in regards to a Work,
subject to the limitations in paragraph 4(a), below;

v. rights protecting the extraction, dissemination, use and reuse of data in
a Work;

vi. database rights (such as those arising under Directive 96/9/EC of the
European Parliament and of the Council of 11 March 1996 on the legal
protection of databases, and under any national implementation thereof,
including any amended or successor version of such directive); and

vii. other similar, equivalent or corresponding rights throughout the world
based on applicable law or treaty, and any national implementations thereof.

2. Waiver. To the greatest extent permitted by, but not in contravention of,
applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
and Related Rights and associated claims and causes of action, whether now
known or unknown (including existing as well as future claims and causes of
action), in the Work (i) in all territories worldwide, (ii) for the maximum
duration provided by applicable law or treaty (including future time
extensions), (iii) in any current or future medium and for any number of
copies, and (iv) for any purpose whatsoever, including without limitation
commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
the Waiver for the benefit of each member of the public at large and to the
detriment of Affirmer's heirs and successors, fully intending that such Waiver
shall not be subject to revocation, rescission, cancellation, termination, or
any other legal or equitable action to disrupt the quiet enjoyment of the Work
by the public as contemplated by Affirmer's express Statement of Purpose.

3. Public License Fallback. Should any part of the Waiver for any reason be
judged legally invalid or ineffective under applicable law, then the Waiver
shall be preserved to the maximum extent permitted taking into account
Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
is so judged Affirmer hereby grants to each affected person a royalty-free,
non transferable, non sublicensable, non exclusive, irrevocable and
unconditional license to exercise Affirmer's Copyright and Related Rights in
the Work (i) in all territories worldwide, (ii) for the maximum duration
provided by applicable law or treaty (including future time extensions), (iii)
in any current or future medium and for any number of copies, and (iv) for any
purpose whatsoever, including without limitation commercial, advertising or
promotional purposes (the "License"). The License shall be deemed effective as
of the date CC0 was applied by Affirmer to the Work. Should any part of the
License for any reason be judged legally invalid or ineffective under
applicable law, such partial invalidity or ineffectiveness shall not
invalidate the remainder of the License, and in such case Affirmer hereby
affirms that he or she will not (i) exercise any of his or her remaining
Copyright and Related Rights in the Work or (ii) assert any associated claims
and causes of action with respect to the Work, in either case contrary to
Affirmer's express Statement of Purpose.

4. Limitations and Disclaimers.

a. No trademark or patent rights held by Affirmer are waived, abandoned,
surrendered, licensed or otherwise affected by this document.

b. Affirmer offers the Work as-is and makes no representations or warranties
of any kind concerning the Work, express, implied, statutory or otherwise,
including without limitation warranties of title, merchantability, fitness
for a particular purpose, non infringement, or the absence of latent or
other defects, accuracy, or the present or absence of errors, whether or not
discoverable, all to the greatest extent permissible under applicable law.

c. Affirmer disclaims responsibility for clearing rights of other persons
that may apply to the Work or any use thereof, including without limitation
any person's Copyright and Related Rights in the Work. Further, Affirmer
disclaims responsibility for obtaining any necessary consents, permissions
or other rights required for any use of the Work.

d. Affirmer understands and acknowledges that Creative Commons is not a
party to this document and has no duty or obligation with respect to this
CC0 or use of the Work.

For more information, please see
<http://creativecommons.org/publicdomain/zero/1.0/>

---

Resources/Svg/Icons/Css.Gg/README (resources/svg/icons/css.gg/README.md) Copy Section

Demo - Figma - Twitter

New in 2.0

Table of Contents

Get Started

npm i css.gg

yarn add css.gg

Using Package Manager \
This package contains the following directories and files:

| Path &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; | What it is |
| :-| :-|
| /css | individual *.css icons |
| /scss | individual *.scss icons |
| /svg | individual *.svg icons |
| /tsx | individual *.tsx icons styled-components |
| /all.css | all icons compressed in a single file |
| /all.d.ts | styled-components |
| /all.fig | local figma file same as https://css.gg/fig |
| /all.js | list of exported styled-components |
| /all.js.map | styled-components |
| /all.json | all icons .css, .svg, *.tsx including markup & public path |
| /all.scss | all icons in a single SCSS file npm i node-sass needed |
| /all.svg | SVG Sprite with all icons |
| /all.xd | local adobe xd file same as https://css.gg/xd |
| /all.xml | all icons .css, .svg, *.tsx including markup & public path |

HTML include

<link href='https://css.gg/css' rel='stylesheet'>

<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>

<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>

#### 2. Single icon

<link href='https://css.gg/ {ICONNAME} .css' rel='stylesheet'>

<link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>

<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>

<link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'>

<i class=" {ICONNAME} "></i>

<span class=" {ICONNAME} "></span>

<div class=" {ICONNAME} "></div>

<gg-icon class=" {ICONNAME} "></gg-icon>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <link href='https://css.gg/css' rel='stylesheet'>
</head>
<body>
    
    <i class="gg- {ICONNAME} "></i>
    
    <div class="gg- {ICONNAME} "></div>
    
    <gg-icon class="gg- {ICONNAME} "></gg-icon>
</body>
</html>

CSS @import

/ css.gg /
@import url('https://css.gg/css');
/ UNPKG /
@import url('https://unpkg.com/css.gg/icons/all.css');
/ JSDelivr /
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.css');

/ css.gg /
@import url('https://css.gg/ {ICONNAME} .css');
/ UNPKG /
@import url('https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css');
/ JSDelivr /
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css');

/ css.gg /
@import url('https://css.gg/css?= {ICONNAME} | {ICONNAME}');

To resize an icon you just need to change the value of a css variable "--ggs" to any value you like if not specified it falls back to 1 or the actual size.

.gg-{ICONNAME} {
    / This value will multiple the actual size  /
    --ggs: 10;
}

The variable can be added to the parent, custom class,body or root level if you want all icons same size.

:root {
    --ggs: 6;
}

.gg-{ICONNAME} {
  color: teal;
}

SVG

https://css.gg/svg

https://unpkg.com/css.gg/icons/all.svg

https://cdn.jsdelivr.net/npm/css.gg/icons/all.svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>
</body>
</html>

#### 2. SVG Single Icon - Download Path

https://css.gg/ {ICONNAME} .svg

https://unpkg.com/css.gg/icons/svg/ {ICONNAME} .svg

https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/></svg>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;" >
    <symbol id="{ICONNAME}">
      
    </symbol>
  </svg>
  
  <svg><use xlink:href="# {ICONNAME} "/></svg>
</body>
</html>

#### 2.3. Example Single copy/paste icon
You can go to https://css.gg/{ICONNAME} and copy the SVG icon directy and paste it on your project. \
You can also download a single icon by just visiting https://css.gg/{ICONNAME}.svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5" /> <path d="M6 7H18V11H6V7Z" fill="currentColor" /> </svg>
</body>
</html>

#### 3. Encode SVG for CSS
You need to define width and height in order for this to work.
Afterwards you can just create a div

.gg-{ICONNAME} {
  background-image:
    url("data:image/svg+xml,<svg></svg>");
}

To encode use this tool \

#### 3.1. Example - Encoded SVG for CSS icon

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <i class="gg- {ICONNAME} "></i>
    
    <div class="gg- {ICONNAME} "></div>
    
    <gg-icon class="gg- {ICONNAME} "></gg-icon>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <svg><path fill=" {COLOR} " /></svg>
</body>
</html>

#### 4.2. using class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      / 1. You define the CSS class like this:  /
      .custom__color path {
        color: teal;
      }
    </style>
</head>
<body>
    
    <svg class="custom__color"><path /></svg>
</body>
</html>

JSON - paths

https://css.gg/json

https://css.gg/json?=&op=css

https://css.gg/json?=&op=css+markup

https://unpkg.com/css.gg/icons/all.json

https://cdn.jsdelivr.net/npm/css.gg/icons/all.json

https://css.gg/json?= {ICONNAME}

https://css.gg/json?= {ICONNAME} &op=css

https://css.gg/json?= {ICONNAME} &op=css+markup

https://css.gg/json?= {ICONNAME} | {ICONNAME}

https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css

https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css+markup

XML - paths

https://css.gg/xml

https://css.gg/xml?=&op=css

https://css.gg/xml?=&op=css+markup

https://unpkg.com/css.gg/icons/all.xml

https://cdn.jsdelivr.net/npm/css.gg/icons/all.xml

https://css.gg/xml?= {ICONNAME}

https://css.gg/xml?= {ICONNAME} &op=css

https://css.gg/xml?= {ICONNAME} &op=css+markup

https://css.gg/xml?= {ICONNAME} | {ICONNAME}

https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css

https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css+markup

React

import { ICONNAME } from 'css.gg'

#### 1. Styled Components 💅
After you install the package by using npm i css.gg or yarn add css.gg you can add a single icon like this:

import React from 'react'
import { ICONNAME } from 'css.gg'
export default function() {
  return (
    <div>
      <ICONNAME />
    </div>
  )
}

https://css.gg/{ICONNAME}.tsx

https://css.gg/{ICONNAME}

import React from 'react';
// local path
import { ICONNAME } from "./ {ICONNAME} "
function App() {
  return (
    <div>
      <ICONNAME />
    </div>
  );
}
export default App;

import React from 'react';
// Import function from package
import { SVG } from 'css.gg'
function App() {
  return (
    <div>
      <svg width="24" height="24"><use xlinkHref={SVG + '#gg-ICONNAME'} /></svg>
    </div>
  );
}
export default App;

#### 4. All CSS icons

import React from 'react';
// Import function from package
import { CSS } from 'css.gg'
function App() {
  return (
    <div>
        
        <i className="gg- {ICONNAME} "></i>
        
        <div className="gg- {ICONNAME} "></div>
        
        <gg-icon className="gg- {ICONNAME} "></gg-icon>
    </div>
  );
}
export default App;

#### 4.1. Single CSS icon

import React from 'react';
// Import path from package
import 'css.gg/icons/css/ {ICONNAME} .css'
function App() {
  return (
    <div>
        
        <i className="gg- {ICONNAME} "></i>
        
        <div className="gg- {ICONNAME} "></div>
        
        <gg-icon className="gg- {ICONNAME} "></gg-icon>
    </div>
  );
}
export default App;

#### 5. All SCSS icons
SCSS format to work you need to have node-sass installed npm i node-sass

import React from 'react';
// Import function from package
import { SCSS } from 'css.gg'
function App() {
  return (
    <div>
        
        <i className="gg- {ICONNAME} "></i>
        
        <div className="gg- {ICONNAME} "></div>
        
        <gg-icon className="gg- {ICONNAME} "></gg-icon>
    </div>
  );
}
export default App;

#### 5.1. Single SCSS icon
SCSS format to work you need to have node-sass installed npm i node-sass

import React from 'react';
// Import path from package
import 'css.gg/icons/scss/ {ICONNAME} .scss'
function App() {
  return (
    <div>
        
        <i className="gg- {ICONNAME} "></i>
        
        <div className="gg- {ICONNAME} "></div>
        
        <gg-icon className="gg- {ICONNAME} "></gg-icon>
    </div>
  );
}
export default App;

#### 6. Combined import SVG, CSS, SCSS etc.

import { SVG, CSS, SCSS, ICONNAME, ICONNAME } from 'css.gg'

Design Tools

#### 2. Adobe XD - https://css.gg/xd
All icons are available as components \

Contributors

To become a contributor do a new pull request.

Donate

Support

v.1.0.6 or older

https://unpkg.com/browse/[email protected]/

https://cdn.jsdelivr.net/npm/[email protected]/

TODO:

If you would like to contribute feel free to do a new pull request.

---

Resources/Svg/Icons/Dripicons/Readme (resources/svg/icons/dripicons/readme.txt) Copy Section

Dripicons V2 has been created by Amit Jakhu from www.amitjakhu.com

Terms of Use:

Dripicons V2 is available for free for use in both personal and commercial projects. Dripicons 2.0 are licensed under Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by-sa/4.0/) and the font under SIL Open Font License (http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL).

You may freely use this icon set without restriction, in software programs, web templates and other materials intended for sale or distribution. No attribution or backlinks are required, but any form of spreading the word is always appreciated!

---

Resources/Svg/Icons/Elegant Font/Gpl License (resources/svg/icons/elegant-font/gpl_license.txt) Copy Section

GNU GENERAL PUBLIC LICENSE
Version 2, June 1991

Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.

Preamble

The licenses for most software are designed to take away your
freedom to share and change it. By contrast, the GNU General Public
License is intended to guarantee your freedom to share and change free
software--to make sure the software is free for all its users. This
General Public License applies to most of the Free Software
Foundation's software and to any other program whose authors commit to
using it. (Some other Free Software Foundation software is covered by
the GNU Lesser General Public License instead.) You can apply it to
your programs, too.

When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
this service if you wish), that you receive source code or can get it
if you want it, that you can change the software or use pieces of it
in new free programs; and that you know you can do these things.

To protect your rights, we need to make restrictions that forbid
anyone to deny you these rights or to ask you to surrender the rights.
These restrictions translate to certain responsibilities for you if you
distribute copies of the software, or if you modify it.

For example, if you distribute copies of such a program, whether
gratis or for a fee, you must give the recipients all the rights that
you have. You must make sure that they, too, receive or can get the
source code. And you must show them these terms so they know their
rights.

We protect your rights with two steps: (1) copyright the software, and
(2) offer you this license which gives you legal permission to copy,
distribute and/or modify the software.

Also, for each author's protection and ours, we want to make certain
that everyone understands that there is no warranty for this free
software. If the software is modified by someone else and passed on, we
want its recipients to know that what they have is not the original, so
that any problems introduced by others will not reflect on the original
authors' reputations.

Finally, any free program is threatened constantly by software
patents. We wish to avoid the danger that redistributors of a free
program will individually obtain patent licenses, in effect making the
program proprietary. To prevent this, we have made it clear that any
patent must be licensed for everyone's free use or not licensed at all.

The precise terms and conditions for copying, distribution and
modification follow.

GNU GENERAL PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

0. This License applies to any program or other work which contains
a notice placed by the copyright holder saying it may be distributed
under the terms of this General Public License. The "Program", below,
refers to any such program or work, and a "work based on the Program"
means either the Program or any derivative work under copyright law:
that is to say, a work containing the Program or a portion of it,
either verbatim or with modifications and/or translated into another
language. (Hereinafter, translation is included without limitation in
the term "modification".) Each licensee is addressed as "you".

Activities other than copying, distribution and modification are not
covered by this License; they are outside its scope. The act of
running the Program is not restricted, and the output from the Program
is covered only if its contents constitute a work based on the
Program (independent of having been made by running the Program).
Whether that is true depends on what the Program does.

1. You may copy and distribute verbatim copies of the Program's
source code as you receive it, in any medium, provided that you
conspicuously and appropriately publish on each copy an appropriate
copyright notice and disclaimer of warranty; keep intact all the
notices that refer to this License and to the absence of any warranty;
and give any other recipients of the Program a copy of this License
along with the Program.

You may charge a fee for the physical act of transferring a copy, and
you may at your option offer warranty protection in exchange for a fee.

2. You may modify your copy or copies of the Program or any portion
of it, thus forming a work based on the Program, and copy and
distribute such modifications or work under the terms of Section 1
above, provided that you also meet all of these conditions:

a) You must cause the modified files to carry prominent notices
stating that you changed the files and the date of any change.

b) You must cause any work that you distribute or publish, that in
whole or in part contains or is derived from the Program or any
part thereof, to be licensed as a whole at no charge to all third
parties under the terms of this License.

c) If the modified program normally reads commands interactively
when run, you must cause it, when started running for such
interactive use in the most ordinary way, to print or display an
announcement including an appropriate copyright notice and a
notice that there is no warranty (or else, saying that you provide
a warranty) and that users may redistribute the program under
these conditions, and telling the user how to view a copy of this
License. (Exception: if the Program itself is interactive but
does not normally print such an announcement, your work based on
the Program is not required to print an announcement.)

These requirements apply to the modified work as a whole. If
identifiable sections of that work are not derived from the Program,
and can be reasonably considered independent and separate works in
themselves, then this License, and its terms, do not apply to those
sections when you distribute them as separate works. But when you
distribute the same sections as part of a whole which is a work based
on the Program, the distribution of the whole must be on the terms of
this License, whose permissions for other licensees extend to the
entire whole, and thus to each and every part regardless of who wrote it.

Thus, it is not the intent of this section to claim rights or contest
your rights to work written entirely by you; rather, the intent is to
exercise the right to control the distribution of derivative or
collective works based on the Program.

In addition, mere aggregation of another work not based on the Program
with the Program (or with a work based on the Program) on a volume of
a storage or distribution medium does not bring the other work under
the scope of this License.

3. You may copy and distribute the Program (or a work based on it,
under Section 2) in object code or executable form under the terms of
Sections 1 and 2 above provided that you also do one of the following:

a) Accompany it with the complete corresponding machine-readable
source code, which must be distributed under the terms of Sections
1 and 2 above on a medium customarily used for software interchange; or,

b) Accompany it with a written offer, valid for at least three
years, to give any third party, for a charge no more than your
cost of physically performing source distribution, a complete
machine-readable copy of the corresponding source code, to be
distributed under the terms of Sections 1 and 2 above on a medium
customarily used for software interchange; or,

c) Accompany it with the information you received as to the offer
to distribute corresponding source code. (This alternative is
allowed only for noncommercial distribution and only if you
received the program in object code or executable form with such
an offer, in accord with Subsection b above.)

The source code for a work means the preferred form of the work for
making modifications to it. For an executable work, complete source
code means all the source code for all modules it contains, plus any
associated interface definition files, plus the scripts used to
control compilation and installation of the executable. However, as a
special exception, the source code distributed need not include
anything that is normally distributed (in either source or binary
form) with the major components (compiler, kernel, and so on) of the
operating system on which the executable runs, unless that component
itself accompanies the executable.

If distribution of executable or object code is made by offering
access to copy from a designated place, then offering equivalent
access to copy the source code from the same place counts as
distribution of the source code, even though third parties are not
compelled to copy the source along with the object code.

4. You may not copy, modify, sublicense, or distribute the Program
except as expressly provided under this License. Any attempt
otherwise to copy, modify, sublicense or distribute the Program is
void, and will automatically terminate your rights under this License.
However, parties who have received copies, or rights, from you under
this License will not have their licenses terminated so long as such
parties remain in full compliance.

5. You are not required to accept this License, since you have not
signed it. However, nothing else grants you permission to modify or
distribute the Program or its derivative works. These actions are
prohibited by law if you do not accept this License. Therefore, by
modifying or distributing the Program (or any work based on the
Program), you indicate your acceptance of this License to do so, and
all its terms and conditions for copying, distributing or modifying
the Program or works based on it.

6. Each time you redistribute the Program (or any work based on the
Program), the recipient automatically receives a license from the
original licensor to copy, distribute or modify the Program subject to
these terms and conditions. You may not impose any further
restrictions on the recipients' exercise of the rights granted herein.
You are not responsible for enforcing compliance by third parties to
this License.

7. If, as a consequence of a court judgment or allegation of patent
infringement or for any other reason (not limited to patent issues),
conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot
distribute so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you
may not distribute the Program at all. For example, if a patent
license would not permit royalty-free redistribution of the Program by
all those who receive copies directly or indirectly through you, then
the only way you could satisfy both it and this License would be to
refrain entirely from distribution of the Program.

If any portion of this section is held invalid or unenforceable under
any particular circumstance, the balance of the section is intended to
apply and the section as a whole is intended to apply in other
circumstances.

It is not the purpose of this section to induce you to infringe any
patents or other property right claims or to contest validity of any
such claims; this section has the sole purpose of protecting the
integrity of the free software distribution system, which is
implemented by public license practices. Many people have made
generous contributions to the wide range of software distributed
through that system in reliance on consistent application of that
system; it is up to the author/donor to decide if he or she is willing
to distribute software through any other system and a licensee cannot
impose that choice.

This section is intended to make thoroughly clear what is believed to
be a consequence of the rest of this License.

8. If the distribution and/or use of the Program is restricted in
certain countries either by patents or by copyrighted interfaces, the
original copyright holder who places the Program under this License
may add an explicit geographical distribution limitation excluding
those countries, so that distribution is permitted only in or among
countries not thus excluded. In such case, this License incorporates
the limitation as if written in the body of this License.

9. The Free Software Foundation may publish revised and/or new versions
of the General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.

Each version is given a distinguishing version number. If the Program
specifies a version number of this License which applies to it and "any
later version", you have the option of following the terms and conditions
either of that version or of any later version published by the Free
Software Foundation. If the Program does not specify a version number of
this License, you may choose any version ever published by the Free Software
Foundation.

10. If you wish to incorporate parts of the Program into other free
programs whose distribution conditions are different, write to the author
to ask for permission. For software which is copyrighted by the Free
Software Foundation, write to the Free Software Foundation; we sometimes
make exceptions for this. Our decision will be guided by the two goals
of preserving the free status of all derivatives of our free software and
of promoting the sharing and reuse of software generally.

NO WARRANTY

11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
REPAIR OR CORRECTION.

12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
POSSIBILITY OF SUCH DAMAGES.

END OF TERMS AND CONDITIONS

How to Apply These Terms to Your New Programs

If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.

To do so, attach the following notices to the program. It is safest
to attach them to the start of each source file to most effectively
convey the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.

<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.

Also add information on how to contact you by electronic and paper mail.

If the program is interactive, make it output a short notice like this
when it starts in an interactive mode:

Gnomovision version 69, Copyright (C) year name of author
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type show c' for details.

The hypothetical commands show w' and show c' should show the appropriate
parts of the General Public License. Of course, the commands you use may
be called something other than show w' and show c'; they could even be
mouse-clicks or menu items--whatever suits your program.

You should also get your employer (if you work as a programmer) or your
school, if any, to sign a "copyright disclaimer" for the program, if
necessary. Here is a sample; alter the names:

Yoyodyne, Inc., hereby disclaims all copyright interest in the program
Gnomovision' (which makes passes at compilers) written by James Hacker.

<signature of Ty Coon>, 1 April 1989
Ty Coon, President of Vice

This General Public License does not permit incorporating your program into
proprietary programs. If your program is a subroutine library, you may
consider it more useful to permit linking proprietary applications with the
library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License.

---

Resources/Svg/Icons/Elegant Font/Mit License (resources/svg/icons/elegant-font/mit_license.txt) Copy Section

The MIT License (MIT)

Copyright (c) <2013> <Elegant Themes, Inc.>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

---

Resources/Svg/Icons/Eva Icons/README (resources/svg/icons/eva-icons/README.md) Copy Section

<h1><img src="https://i.imgur.com/cXYo5bi.png"> Eva Icons</h1>
<img src="https://i.imgur.com/oDmqDkE.jpg">

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4 animation types: zoom, pulse, shake and flip. Download on desktop to use them in your digital products for Web, iOS and Android. Icons are provided in two visual types: Fill and Outline and in several formats, including PNG, SVG, font, Sketch, etc.

Download Copy Chapter

<script src="https://unpkg.com/eva-icons"></script>

npm i eva-icons

<script src="path/to/dist/eva-icons.js"></script>

const eva = require('eva-icons');

import * as eva from 'eva-icons';

- Add the data-eva attribute with the icon name to an element:

<i data-eva="github"></i>

- Call eva.replace(); to replace all elements with the data-eva data attribute with SVG elements. You can also pass some additional parameters to the replace method to modify the replace function behavior.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/eva-icons"></script>
  <body>
  
    <i data-eva="github"></i>
    <script>
      eva.replace()
    </script>
  </body>
</html>

- Additional attributes:
* data-eva-fill: set icon color
* data-eva-height: set icon height
* data-eva-width: set icon width
* data-eva-animation: set icon animation



<i data-eva="github" data-eva-fill="#ff0000" data-eva-height="48" data-eva-width="48"></i>

Fonts Copy Section

Eva Icons are also available as a Web Font.

- Include the font css into your page:

<link href="path/to/style/eva-icons.css">

<i class="eva eva-github"></i>

eva.replace(options) ')" title="Copy section prompt for LLMs"> Copy Section

Replaces all elements that have a data-eva attribute with SVG markup.

options optional object.

#### Available 'option' properties:
| Name | Type | Default value | Description |
|------| ------ | ------------- |-------------|
| fill | string | none | Icon color |
| width | string or number | 24px | Icon width |
| height | string or number | 24px | Icon height |
| class | string | none | Custom css class |
| animation | object | none | Icon animation |

Animation Copy Section

<i data-eva="github" data-eva-animation="zoom"></i>

- Additional animation attributes:
* data-eva-hover: Makes the animation available on hover. Default value is true. Available true or false.
* data-eva-infinite: Makes the animation infinite. Default value is false. Available true or false.

<i data-eva="github" data-eva-animation="zoom" data-eva-hover="false" data-eva-infinite="true"></i>

Note: In the above example github icon will be always animated. This type of animation will be applied only to current icons.

- Pass animation as property in a eva.replace method.

eva.replace({
  animation: {
    type: string, // zoom, pulse, shake, flip
    hover: boolean, // default true
    infinite: boolean, // default false
  }
});

- Add eva-parent-hover class to the parent container in a case you want to activate the animation hovering on the parent element.

<div class="eva-parent-hover">
  <i data-eva="github" data-eva-animation="zoom"></i>
  Zoom animation
</div>

3rd party implementations Copy Chapter

- React Native
- Flutter

License Copy Chapter

npm install feather-icons

* Quick Start
* Usage
* Client-side JavaScript
* Node
* SVG Sprite
* Figma
* API Reference
* feather.icons
* [feather.icons[name].toSvg()](#feathericonsnametosvgattrs)
* feather.replace()
* (DEPRECATED) feather.toSvg()
* Contributing
* Related Projects
* License

Quick Start Copy Chapter

Start with this CodePen Template to begin prototyping with Feather in the browser.

Or copy and paste the following code snippet into a blank html file.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>
    
    <i data-feather="circle"></i>
    <script>
      feather.replace()
    </script>
  </body>
</html>

Usage Copy Chapter

At its core, Feather is a collection of SVG files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. img, background-image, inline, object, embed, iframe). Here's a helpful article detailing the many ways SVGs can be used on the web: SVG on the Web – Implementation Options

The following are additional ways you can use Feather.

Client-side JavaScript Copy Section

#### 1. Install

Note: If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

npm install feather-icons --save

Or just copy feather.js or feather.min.js into your project directory. You don't need both feather.js and feather.min.js.

#### 2. Include

Include feather.js or feather.min.js with a <script> tag:

<script src="path/to/dist/feather.js"></script>

Note: feather.js and feather.min.js are located in the dist directory of the npm package.

Or load the script from a CDN provider:

<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

After including the script, feather will be available as a global variable.

#### 3. Use

To use an icon on your page, add a data-feather attribute with the icon name to an element:

<i data-feather="circle"></i>

See the complete list of icons at feathericons.com.

#### 4. Replace

Call the feather.replace() method:

<script>
  feather.replace()
</script>

All elements that have a data-feather attribute will be replaced with SVG markup corresponding to their data-feather attribute value. See the API Reference for more information about feather.replace().

Node Copy Section

npm install feather-icons --save

const feather = require('feather-icons')

feather.icons.x
// {
//    name: 'x',
//    contents: '<line ... /><line ... />,
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//      fill: 'none',
//      stroke: 'currentColor',
//      'stroke-width': 2,
//      'stroke-linecap': 'round',
//      'stroke-linejoin': 'round',
//    },
//    toSvg: [Function],
// }
feather.icons.x.toSvg()
// <svg class="feather feather-x" ...><line ... /><line ... /></svg>
feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' })
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>

See the API Reference for more information about the available properties and methods of the feather object.

SVG Sprite Copy Section

#### 1. Install

Note: If you intend to use Feather with a CDN, you can skip this installation step.

Install with npm.

npm install feather-icons --save

Or just copy feather-sprite.svg into your project directory.

#### 2. Use

Include an icon on your page with the following markup:

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
<use href="path/to/feather-sprite.svg#circle"/>

</svg>

Note: circle in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com.

However, this markup can be simplified using a simple CSS class to avoid repetition of SVG attributes between icons:

.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

<svg class="feather">
  <use href="path/to/dist/feather-sprite.svg#circle"/>
</svg>

Figma Copy Section

API Reference Copy Chapter

feather.icons feather.icons')" title="Copy section prompt for LLMs"> Copy Section

An object with data about every icon.

#### Usage

feather.icons.x
// {
//    name: 'x',
//    contents: '<line ... /><line ... />',
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//      fill: 'none',
//      stroke: 'currentColor',
//      'stroke-width': 2,
//      'stroke-linecap': 'round',
//      'stroke-linejoin': 'round',
//    },
//    toSvg: [Function],
// }
feather.icons.x.toString()
// '<line ... /><line ... />'

Note: x in the above example can be replaced with any valid icon name. See the complete list of icon names at feathericons.com. Icons with multi-word names (e.g. arrow-right) cannot be accessed using dot notation (e.g. feather.icons.x). Instead, use bracket notation (e.g. feather.icons['arrow-right']).

View Source

---

feather.icons[name].toSvg([attrs]) feather.icons[name].toSvg([attrs])')" title="Copy section prompt for LLMs"> Copy Section

Returns an SVG string.

#### Parameters

| Name | Type | Description |
| --------- | ------ | ----------- |
| attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |

Hint: You might find these SVG attributes helpful for manipulating icons:

* color

* width

* height

* stroke-width

* stroke-linecap

* stroke-linejoin

#### Usage

feather.icons.circle.toSvg()
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ 'stroke-width': 1 })
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.icons.circle.toSvg({ class: 'foo bar' })
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

View Source

---

feather.replace([attrs]) feather.replace([attrs])')" title="Copy section prompt for LLMs"> Copy Section

Replaces all elements that have a data-feather attribute with SVG markup corresponding to the element's data-feather attribute value.

#### Parameters

| Name | Type | Description |
| ---------- | ------ | ----------- |
| attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |

#### Usage

Note: feather.replace() only works in a browser environment.

Simple usage:

<i data-feather="circle"></i>

<script>
  feather.replace()
</script>

You can pass feather.replace() an attrs object:

<i data-feather="circle"></i>

<script>
  feather.replace({ class: 'foo bar', 'stroke-width': 1 })
</script>

All attributes on the placeholder element (i.e. <i>) will be copied to the <svg> tag:

<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>

<script>
  feather.replace()
</script>

View Source

---

(DEPRECATED) feather.toSvg(name, [attrs]) feather.toSvg(name, [attrs])')" title="Copy section prompt for LLMs"> Copy Section

Note: feather.toSvg() is deprecated. Please use feather.icons[name].toSvg() instead.

Returns an SVG string.

#### Parameters

| Name | Type | Description |
| --------- | ------ | ----------- |
| name | string | Icon name |
| attrs (optional) | Object | Key-value pairs in the attrs object will be mapped to HTML attributes on the <svg> tag (e.g. { foo: 'bar' } maps to foo="bar"). All default attributes on the <svg> tag can be overridden with the attrs object. |

#### Usage

feather.toSvg('circle')
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { 'stroke-width': 1 })
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'
feather.toSvg('circle', { class: 'foo bar' })
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

View Source

Contributing Copy Chapter

For more info on how to contribute please see the contribution guidelines.

Caught a mistake or want to contribute to the documentation? Edit this page on Github

Related Projects Copy Chapter

- angular-feather - Feather icons for Angular applications
- elm-feather - Feather icons for Elm applications
- react-feather - Feather icons as React components
- sketch-feather - Feather icons as a Sketch library
- vue-feather-icons - Feather icons as Vue components
- php-feather - Feather icons as a PHP Library
- wp-php-feather - Feather icons as a WordPress template tag
- django-feather - Feather icons as Django Template Tag
- svelte-feather-icons - Feather icons as Svelte components
- gulp-feather - Feather icons renderng using gulp

License Copy Chapter

Feather is licensed under the MIT License.

---

Resources/Svg/Icons/Font Awesome/LICENSE (resources/svg/icons/font-awesome/LICENSE.txt) Copy Section

Font Awesome Free License
-------------------------

Font Awesome Free is free, open source, and GPL friendly. You can use it for
commercial projects, open source projects, or really almost whatever you want.
Full Font Awesome Free license: https://fontawesome.com/license/free.

Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)

Fonts: SIL OFL 1.1 License (https://scripts.sil.org/OFL)

Code: MIT License (https://opensource.org/licenses/MIT)

Attribution

We've kept attribution comments terse, so we ask that you do not actively work
to remove them from files, especially code. They're a great way for folks to
learn about Font Awesome.

Brand Icons

---

Resources/Svg/Icons/Heroicons/README (resources/svg/icons/heroicons/README.md) Copy Section

<p align="center">
<img src="https://raw.githubusercontent.com/tailwindlabs/heroicons/master/.github/logo.svg" alt="Heroicons">
</p>

<p align="center">
A set of 450+ free MIT-licensed high-quality SVG icons for you to use in your web projects. <br>Available as basic SVG icons and via first-party <a href="#react">React</a> and <a href="#vue">Vue</a> libraries.
<p>

<p align="center">
<a href="https://heroicons.com"><strong>Browse at Heroicons.com &rarr;</strong></a>
</p>

<p align="center">
<a href="https://github.com/tailwindlabs/heroicons/releases"><img src="https://img.shields.io/npm/v/heroicons" alt="Latest Release"></a>
<a href="https://github.com/tailwindlabs/heroicons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/heroicons.svg" alt="License"></a>
</p>

Basic Usage Copy Chapter

The quickest way to use these icons is to simply copy the source for the icon you need from heroicons.com and inline it directly into your HTML:

<svg class="h-6 w-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
  />
</svg>

Both icon styles are preconfigured to be stylable by setting the color CSS property, either manually or using utility classes like text-gray-500 in a framework like Tailwind CSS.

React Copy Chapter

First, install @heroicons/react from npm:

npm install @heroicons/react

Now each icon can be imported individually as a React component:

import { BeakerIcon } from '@heroicons/react/solid'
function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

The 24x24 outline icons can be imported from @heroicons/react/outline, and the 20x20 solid icons can be imported from @heroicons/react/solid.

Icons use an upper camel case naming convention and are always suffixed with the word Icon.

Browse the full list of icon names on UNPKG &rarr;

Vue Copy Chapter

Note that this library currently only supports Vue 3.

First, install @heroicons/vue from npm:

npm install @heroicons/vue

Now each icon can be imported individually as a Vue component:

<template>
  <div>
    <BeakerIcon class="h-5 w-5 text-blue-500"/>
    <p>...</p>
  </div>
</template>
<script>
import { BeakerIcon } from '@heroicons/vue/solid'
export default {
  components: { BeakerIcon }
}
</script>

The 24x24 outline icons can be imported from @heroicons/vue/outline, and the 20x20 solid icons can be imported from @heroicons/vue/solid.

Icons use an upper camel case naming convention and are always suffixed with the word Icon.

Browse the full list of icon names on UNPKG &rarr;

License Copy Chapter

This library is MIT licensed.

---

Resources/Svg/Icons/Iconoir/README (resources/svg/icons/iconoir/README.md) Copy Section

<p align="center">
<img src="assets/iconoir.png" alt="Iconoir">
</p>

<p align="center">
Iconoir is an open source library with 1000+ SVG Icons, designed on a 24x24 pixels grid. No premium icons, no email sign-up, no newsletters.
<p>

<p align="center">
<a href="https://iconoir.com"><strong>Browse at iconoir.com &rarr;</strong></a>
</p>

<p align="center">
<a href="https://github.com/lucaburgio/iconoir/releases">
<img src="https://img.shields.io/github/v/release/lucaburgio/iconoir?style=flat-square" alt="Version">
</a>
<a href="https://github.com/lucaburgio/iconoir">
<img src="https://img.shields.io/github/stars/lucaburgio/iconoir?style=flat-square" alt="Project Stars">
</a>
<a href="https://github.com/lucaburgio/iconoir/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/lucaburgio/iconoir?style=flat-square" alt="License">
</a>
</p>

Basic Usage Copy Chapter

You can download any icon of the pack directly from https://iconoir.com or get them from this repository.

Additionally, the icons are available via the iconoir NPM package:

yarn add iconoir
or

npm i iconoir

Example usage:

import Iconoir from 'iconoir/icons/iconoir.svg'

React Copy Chapter

A React library is available to install under the name iconoir-react. For more details, see the package README.

React Native Copy Chapter

A React Native library is available to install under the name iconoir-react-native. For more details, see the package README.

Framer Copy Chapter

Iconoir is happily part of Framer now. To start using the icons: On the top menu, Insert > Graphics > Iconoir.
You can switch between icons from the right sidebar in the editor.

CSS Copy Chapter

Import the CSS File:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lucaburgio/iconoir@master/css/iconoir.css">

Here is an example in HTML:

<i class="iconoir-hand-brake"></i>

Figma Copy Chapter

The library is available in the Figma community here.

License Copy Chapter

MIT License

---

Resources/Svg/Icons/Iconsax/License (resources/svg/icons/iconsax/license.txt) Copy Section

https://github.com/lusaxweb/iconsax

Iconsax are the official icons of the Vuesax framework, these icons can be used for personal and commercial use for free, but they cannot be sold and distributed under another name, they cannot be used to create templates or ui kits without permission, if desired to use the iconsax icon pack for these purposes, you should contact: https://lusaxweb.net/contact

---

Resources/Svg/Icons/Ikonate/README (resources/svg/icons/ikonate/README.md) Copy Section

Ikonate

[](https://badge.fury.io/js/ikonate)

Ikonate are fully customisable & accessible*, well-optimised vector icons.

To learn more about the project and generate the icons online, visit Ikonate.com. In the downloaded .zip file you will find:
* customised SVG icons as stand-alone files (perfect for designers who don't want to edit code)
* customised SVG sprite with an html demo
* customised html demo of the icons as inline SVG

You can also follow the documentation below to generate generic demo files with all the available icons and customise them manually.

Built by @mikolajdobrucki & @mzaremski at ucreate

Installation Copy Chapter

Git repository Copy Chapter

You can clone this repository to manually install Ikonate in your project…

git clone https://github.com/eucalyptuss/ikonate.git

Install with npm Copy Section

…or you can download the icons using npm package manager.

npm install ikonate

Build Copy Section

To generate generic demo files and SVG sprites, install npm dependencies first.

npm install

Then, run a build command from the main repo directory.

npm run build

Demo & files structure Copy Chapter

Raw SVG Copy Section

All the icons are available as raw, unstyled SVGs at ./ikonate/icons.

Demo files Copy Section

To view the demo files, remember to run a build command first.

The generated demos of inline SVGs and SVG sprites are available respectively under ./ikonate/build/inline/index.html and ./ikonate/build/sprite/index.html.

IT DOESN'T WORK! If you open the sprite demo directly in your browser, it may not display the icons correctly. To fix it, open it using an local server such as http-server.

Usage Copy Chapter

As <img> or background-image. <img> or background-image.')" title="Copy section prompt for LLMs"> Copy Section

Reference: CSS Tricks: Using SVG as an <img>

To generate your icons as separate styled svg files, visit Ikonate.com.

Remember that using icons as <img> or background-image, you can't customise them with CSS.

As inline SVG. Copy Section

Reference: CSS Tricks: Using "inline" SVG

To use icons as inline svg, import the icons you need using a technique appropriate for your project from ./ikonate/icons.

Using this approach, you can later customise the icons with CSS.

As SVG sprite. Copy Section

Reference: CSS Tricks: SVG use with External Reference

After running the build command successfully, you will find the SVG sprite with all the available icons in ./ikonate/sprite.

To generate your custom optimised SVG sprite, visit Ikonate.com.

Using this approach, you can later customise the icons with CSS.

If you'd like to learn more about different ways of using SVG in your project, check out the following articles:
* A Practical Guide by svgontheweb.com
* Using SVG Tutorial by CSS-Tricks

Customisation Copy Chapter

To customise icons with CSS you need to use the icons as either inline SVG or SVG sprite.

You can use the following CSS parameters to customise the icons:
* width
* height
* stroke
* stroke-width
* stroke-linecap
* stroke-linejoin

e.g.:

width: 24px;
height: 24px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;

Check the demo files for a representative example.

You can also generate the styles and all the customised demo files at Ikonate.com.

Accessibility Copy Chapter

Ikonate is NOT accessible out of the box and will never be. We've done our best to follow the best accessibility practices while building this software, but it's your role to adjust it and make it truly accessible inside your project.

E.g. all the titles and descriptions given to the icons should be treated as placeholders and changed in implementation depending on an actual role of each icon. In many cases, you may not need them altogether.

To learn more on this topic, read an excellent article by Chris Coyier: How Can I Make My Icon System Accessible?

License Copy Chapter

Ikonate is available under the MIT. Feel free to use the set in both personal and commercial projects. Attribution is much appreciated but not required.

---

Resources/Svg/Icons/Ionicons/Readme (resources/svg/icons/ionicons/readme.md) Copy Section

Ionicons

Ionicons is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for Ionic Framework, so icons have both Material Design and iOS versions.

Note: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.

We intend for this icon pack to be used with Ionic, but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under MIT.

Contributing Copy Chapter

Thanks for your interest in contributing! Read up on our guidelines for
contributing
and then look through our issues with a help wanted
label.

Using the Web Component Copy Chapter

The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.

Also note that only visible icons are loaded, and icons which are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource.

Installation Copy Section

If you're using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following <script> near the end of your page, right before the closing </body> tag, to enable them.

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

Basic usage Copy Section

To use a built-in icon from the Ionicons package, populate the name attribute on the ion-icon component:

<ion-icon name="heart"></ion-icon>

Custom icons Copy Section

To use a custom SVG, provide its url in the src attribute to request the external SVG file. The src attribute works the same as <img src="..."> in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.

<ion-icon src="/path/to/external/file.svg"></ion-icon>

Variants Copy Chapter

<ion-icon name="heart"></ion-icon> 
<ion-icon name="heart-outline"></ion-icon> 
<ion-icon name="heart-sharp"></ion-icon>

Platform specificity Copy Section

<ion-icon ios="heart-outline" md="heart-sharp"></ion-icon>

Size Copy Chapter

To specify the icon size, you can use the size attribute for our pre-defined font sizes.

<ion-icon size="small"></ion-icon>
<ion-icon size="large"></ion-icon>

Or you can set a specific size by applying the font-size CSS property on the ion-icon component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)

ion-icon {
  font-size: 64px;
}

Color Copy Chapter

Specify the icon color by applying the color CSS property on the ion-icon component.

ion-icon {
  color: blue;
}

Stroke width Copy Chapter

<ion-icon name="heart-outline"></ion-icon>

ion-icon {
  --ionicon-stroke-width: 16px;
}

Migrating from v4 Copy Chapter

See the 5.0 release notes for a list of icon deletions/renames.

License Copy Chapter

Ionicons is licensed under the MIT license.

Related Copy Chapter

* Ionicons Homepage
* Ionic Framework
* Ionic Worldwide Slack
* Ionic Forum
* Stencil
* Stencil Worldwide Slack
* Capacitor

---

Resources/Svg/Icons/Jam Icons/README (resources/svg/icons/jam-icons/README.md) Copy Section

<p align="center">
<img src="https://jam-icons.com/logo.svg">
</p>

Jam icons is a set of SVG icons designed for web projects, illustrations, print projects, etc. Licensed under MIT.
Icons: https://jam-icons.com

What's new? Copy Chapter

Support for font and JS has been dropped to focus on SVG only (v3). The idea is to simplify the current package, believing that SVG / inline SVG is the principal way to go when it comes to web icons.

Usage Copy Chapter

#### Full list

The complete icons list is available on https://jam-icons.com.
You'll be able to either download the SVG file or copy the markup when hovering an icon.

#### Download Set

Hit the download button to download the full set.

Support Copy Chapter

If you have some icons ideas, please open a new issue. Thanks for your support!

Compatibility Copy Chapter

#### Version 2.0.0

The V2 is still available at https://v2.jam-icons.com/

Changelog Copy Chapter

Jam icons is following the Semantic Versioning with the MAJOR.MINOR.PATCH format.

- V3.1.0 - 44 new icons
- V3.0.0 - Set update
- V2.0.0 - New release with 896 icons
- V1.0.72 - Optimizing SVGs
- V1.0.0 - First release with 422 icons

License Copy Chapter

This project is licensed under MIT

---

Resources/Svg/Icons/Linea/Read Me (resources/svg/icons/linea/read_me.txt) Copy Section

Linea Iconset

Linea Iconset is a free iconset designed by Dario Ferrando.
The set is distributed under CCBY license, meaning that you can use these files both for private and commercial projects.
You are however obliged to attribute the work to Dario Ferrando

In case you want to buy the rights and be freed of the attribution obligation, don't hesitate to contact me at [email protected]

CCBY LICENSE
http://creativecommons.org/licenses/by/4.0/

License

THE WORK (AS DEFINED BELOW) IS PROVIDED UNDER THE TERMS OF THIS CREATIVE COMMONS PUBLIC LICENSE ("CCPL" OR "LICENSE"). THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW. ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE OR COPYRIGHT LAW IS PROHIBITED.

BY EXERCISING ANY RIGHTS TO THE WORK PROVIDED HERE, YOU ACCEPT AND AGREE TO BE BOUND BY THE TERMS OF THIS LICENSE. TO THE EXTENT THIS LICENSE MAY BE CONSIDERED TO BE A CONTRACT, THE LICENSOR GRANTS YOU THE RIGHTS CONTAINED HERE IN CONSIDERATION OF YOUR ACCEPTANCE OF SUCH TERMS AND CONDITIONS.

1. Definitions

"Adaptation" means a work based upon the Work, or upon the Work and other pre-existing works, such as a translation, adaptation, derivative work, arrangement of music or other alterations of a literary or artistic work, or phonogram or performance and includes cinematographic adaptations or any other form in which the Work may be recast, transformed, or adapted including in any form recognizably derived from the original, except that a work that constitutes a Collection will not be considered an Adaptation for the purpose of this License. For the avoidance of doubt, where the Work is a musical work, performance or phonogram, the synchronization of the Work in timed-relation with a moving image ("synching") will be considered an Adaptation for the purpose of this License.
"Collection" means a collection of literary or artistic works, such as encyclopedias and anthologies, or performances, phonograms or broadcasts, or other works or subject matter other than works listed in Section 1(f) below, which, by reason of the selection and arrangement of their contents, constitute intellectual creations, in which the Work is included in its entirety in unmodified form along with one or more other contributions, each constituting separate and independent works in themselves, which together are assembled into a collective whole. A work that constitutes a Collection will not be considered an Adaptation (as defined above) for the purposes of this License.
"Distribute" means to make available to the public the original and copies of the Work or Adaptation, as appropriate, through sale or other transfer of ownership.
"Licensor" means the individual, individuals, entity or entities that offer(s) the Work under the terms of this License.
"Original Author" means, in the case of a literary or artistic work, the individual, individuals, entity or entities who created the Work or if no individual or entity can be identified, the publisher; and in addition (i) in the case of a performance the actors, singers, musicians, dancers, and other persons who act, sing, deliver, declaim, play in, interpret or otherwise perform literary or artistic works or expressions of folklore; (ii) in the case of a phonogram the producer being the person or legal entity who first fixes the sounds of a performance or other sounds; and, (iii) in the case of broadcasts, the organization that transmits the broadcast.
"Work" means the literary and/or artistic work offered under the terms of this License including without limitation any production in the literary, scientific and artistic domain, whatever may be the mode or form of its expression including digital form, such as a book, pamphlet and other writing; a lecture, address, sermon or other work of the same nature; a dramatic or dramatico-musical work; a choreographic work or entertainment in dumb show; a musical composition with or without words; a cinematographic work to which are assimilated works expressed by a process analogous to cinematography; a work of drawing, painting, architecture, sculpture, engraving or lithography; a photographic work to which are assimilated works expressed by a process analogous to photography; a work of applied art; an illustration, map, plan, sketch or three-dimensional work relative to geography, topography, architecture or science; a performance; a broadcast; a phonogram; a compilation of data to the extent it is protected as a copyrightable work; or a work performed by a variety or circus performer to the extent it is not otherwise considered a literary or artistic work.
"You" means an individual or entity exercising rights under this License who has not previously violated the terms of this License with respect to the Work, or who has received express permission from the Licensor to exercise rights under this License despite a previous violation.
"Publicly Perform" means to perform public recitations of the Work and to communicate to the public those public recitations, by any means or process, including by wire or wireless means or public digital performances; to make available to the public Works in such a way that members of the public may access these Works from a place and at a place individually chosen by them; to perform the Work to the public by any means or process and the communication to the public of the performances of the Work, including by public digital performance; to broadcast and rebroadcast the Work by any means including signs, sounds or images.
"Reproduce" means to make copies of the Work by any means including without limitation by sound or visual recordings and the right of fixation and reproducing fixations of the Work, including storage of a protected performance or phonogram in digital form or other electronic medium.
2. Fair Dealing Rights. Nothing in this License is intended to reduce, limit, or restrict any uses free from copyright or rights arising from limitations or exceptions that are provided for in connection with the copyright protection under copyright law or other applicable laws.

3. License Grant. Subject to the terms and conditions of this License, Licensor hereby grants You a worldwide, royalty-free, non-exclusive, perpetual (for the duration of the applicable copyright) license to exercise the rights in the Work as stated below:

to Reproduce the Work, to incorporate the Work into one or more Collections, and to Reproduce the Work as incorporated in the Collections;
to create and Reproduce Adaptations provided that any such Adaptation, including any translation in any medium, takes reasonable steps to clearly label, demarcate or otherwise identify that changes were made to the original Work. For example, a translation could be marked "The original work was translated from English to Spanish," or a modification could indicate "The original work has been modified.";
to Distribute and Publicly Perform the Work including as incorporated in Collections; and,
to Distribute and Publicly Perform Adaptations.
For the avoidance of doubt:

Non-waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme cannot be waived, the Licensor reserves the exclusive right to collect such royalties for any exercise by You of the rights granted under this License;
Waivable Compulsory License Schemes. In those jurisdictions in which the right to collect royalties through any statutory or compulsory licensing scheme can be waived, the Licensor waives the exclusive right to collect such royalties for any exercise by You of the rights granted under this License; and,
Voluntary License Schemes. The Licensor waives the right to collect royalties, whether individually or, in the event that the Licensor is a member of a collecting society that administers voluntary licensing schemes, via that society, from any exercise by You of the rights granted under this License.
The above rights may be exercised in all media and formats whether now known or hereafter devised. The above rights include the right to make such modifications as are technically necessary to exercise the rights in other media and formats. Subject to Section 8(f), all rights not expressly granted by Licensor are hereby reserved.

4. Restrictions. The license granted in Section 3 above is expressly made subject to and limited by the following restrictions:

You may Distribute or Publicly Perform the Work only under the terms of this License. You must include a copy of, or the Uniform Resource Identifier (URI) for, this License with every copy of the Work You Distribute or Publicly Perform. You may not offer or impose any terms on the Work that restrict the terms of this License or the ability of the recipient of the Work to exercise the rights granted to that recipient under the terms of the License. You may not sublicense the Work. You must keep intact all notices that refer to this License and to the disclaimer of warranties with every copy of the Work You Distribute or Publicly Perform. When You Distribute or Publicly Perform the Work, You may not impose any effective technological measures on the Work that restrict the ability of a recipient of the Work from You to exercise the rights granted to that recipient under the terms of the License. This Section 4(a) applies to the Work as incorporated in a Collection, but this does not require the Collection apart from the Work itself to be made subject to the terms of this License. If You create a Collection, upon notice from any Licensor You must, to the extent practicable, remove from the Collection any credit as required by Section 4(b), as requested. If You create an Adaptation, upon notice from any Licensor You must, to the extent practicable, remove from the Adaptation any credit as required by Section 4(b), as requested.
If You Distribute, or Publicly Perform the Work or any Adaptations or Collections, You must, unless a request has been made pursuant to Section 4(a), keep intact all copyright notices for the Work and provide, reasonable to the medium or means You are utilizing: (i) the name of the Original Author (or pseudonym, if applicable) if supplied, and/or if the Original Author and/or Licensor designate another party or parties (e.g., a sponsor institute, publishing entity, journal) for attribution ("Attribution Parties") in Licensor's copyright notice, terms of service or by other reasonable means, the name of such party or parties; (ii) the title of the Work if supplied; (iii) to the extent reasonably practicable, the URI, if any, that Licensor specifies to be associated with the Work, unless such URI does not refer to the copyright notice or licensing information for the Work; and (iv) , consistent with Section 3(b), in the case of an Adaptation, a credit identifying the use of the Work in the Adaptation (e.g., "French translation of the Work by Original Author," or "Screenplay based on original Work by Original Author"). The credit required by this Section 4 (b) may be implemented in any reasonable manner; provided, however, that in the case of a Adaptation or Collection, at a minimum such credit will appear, if a credit for all contributing authors of the Adaptation or Collection appears, then as part of these credits and in a manner at least as prominent as the credits for the other contributing authors. For the avoidance of doubt, You may only use the credit required by this Section for the purpose of attribution in the manner set out above and, by exercising Your rights under this License, You may not implicitly or explicitly assert or imply any connection with, sponsorship or endorsement by the Original Author, Licensor and/or Attribution Parties, as appropriate, of You or Your use of the Work, without the separate, express prior written permission of the Original Author, Licensor and/or Attribution Parties.
Except as otherwise agreed in writing by the Licensor or as may be otherwise permitted by applicable law, if You Reproduce, Distribute or Publicly Perform the Work either by itself or as part of any Adaptations or Collections, You must not distort, mutilate, modify or take other derogatory action in relation to the Work which would be prejudicial to the Original Author's honor or reputation. Licensor agrees that in those jurisdictions (e.g. Japan), in which any exercise of the right granted in Section 3(b) of this License (the right to make Adaptations) would be deemed to be a distortion, mutilation, modification or other derogatory action prejudicial to the Original Author's honor and reputation, the Licensor will waive or not assert, as appropriate, this Section, to the fullest extent permitted by the applicable national law, to enable You to reasonably exercise Your right under Section 3(b) of this License (right to make Adaptations) but not otherwise.
5. Representations, Warranties and Disclaimer

UNLESS OTHERWISE MUTUALLY AGREED TO BY THE PARTIES IN WRITING, LICENSOR OFFERS THE WORK AS-IS AND MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND CONCERNING THE WORK, EXPRESS, IMPLIED, STATUTORY OR OTHERWISE, INCLUDING, WITHOUT LIMITATION, WARRANTIES OF TITLE, MERCHANTIBILITY, FITNESS FOR A PARTICULAR PURPOSE, NONINFRINGEMENT, OR THE ABSENCE OF LATENT OR OTHER DEFECTS, ACCURACY, OR THE PRESENCE OF ABSENCE OF ERRORS, WHETHER OR NOT DISCOVERABLE. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO SUCH EXCLUSION MAY NOT APPLY TO YOU.

6. Limitation on Liability. EXCEPT TO THE EXTENT REQUIRED BY APPLICABLE LAW, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, PUNITIVE OR EXEMPLARY DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK, EVEN IF LICENSOR HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.

7. Termination

This License and the rights granted hereunder will terminate automatically upon any breach by You of the terms of this License. Individuals or entities who have received Adaptations or Collections from You under this License, however, will not have their licenses terminated provided such individuals or entities remain in full compliance with those licenses. Sections 1, 2, 5, 6, 7, and 8 will survive any termination of this License.
Subject to the above terms and conditions, the license granted here is perpetual (for the duration of the applicable copyright in the Work). Notwithstanding the above, Licensor reserves the right to release the Work under different license terms or to stop distributing the Work at any time; provided, however that any such election will not serve to withdraw this License (or any other license that has been, or is required to be, granted under the terms of this License), and this License will continue in full force and effect unless terminated as stated above.
8. Miscellaneous

Each time You Distribute or Publicly Perform the Work or a Collection, the Licensor offers to the recipient a license to the Work on the same terms and conditions as the license granted to You under this License.
Each time You Distribute or Publicly Perform an Adaptation, Licensor offers to the recipient a license to the original Work on the same terms and conditions as the license granted to You under this License.
If any provision of this License is invalid or unenforceable under applicable law, it shall not affect the validity or enforceability of the remainder of the terms of this License, and without further action by the parties to this agreement, such provision shall be reformed to the minimum extent necessary to make such provision valid and enforceable.
No term or provision of this License shall be deemed waived and no breach consented to unless such waiver or consent shall be in writing and signed by the party to be charged with such waiver or consent.
This License constitutes the entire agreement between the parties with respect to the Work licensed here. There are no understandings, agreements or representations with respect to the Work not specified here. Licensor shall not be bound by any additional provisions that may appear in any communication from You. This License may not be modified without the mutual written agreement of the Licensor and You.
The rights granted under, and the subject matter referenced, in this License were drafted utilizing the terminology of the Berne Convention for the Protection of Literary and Artistic Works (as amended on September 28, 1979), the Rome Convention of 1961, the WIPO Copyright Treaty of 1996, the WIPO Performances and Phonograms Treaty of 1996 and the Universal Copyright Convention (as revised on July 24, 1971). These rights and subject matter take effect in the relevant jurisdiction in which the License terms are sought to be enforced according to the corresponding provisions of the implementation of those treaty provisions in the applicable national law. If the standard suite of rights granted under applicable copyright law includes additional rights not granted under this License, such additional rights are deemed to be included in the License; this License is not intended to restrict the license of any rights under applicable law.

---

Resources/Svg/Icons/Lineawesome/LICENSE (resources/svg/icons/lineawesome/LICENSE.txt) Copy Section

If you use the icons publicly, please link to https://icons8.com/line-awesome somewhere on your page or artwork, so that more creators could know about it and use it for free.

---

Resources/Svg/Icons/Material Design/README (resources/svg/icons/material-design/README.md) Copy Section

Material Design

This repo contains all the planning for current and work-in-progress Material Design Icons.

Getting Started

[](https://www.npmjs.com/package/@mdi/svg) [](https://github.com/Templarian/MaterialDesign/issues)

Icons Copy Chapter

View at Material Design Icons. This repo also contains converted icons from Google's official icon set.

| | NPM | Dist Repo | |
|-----------------|-----------------------|-----------|---|
| Webfont / SCSS | npm install @mdi/font | MaterialDesign-Webfont | [](https://github.com/Templarian/MaterialDesign-Webfont) |
| JavaScript / TypeScript | npm install @mdi/js | MaterialDesign-JS | [](https://github.com/Templarian/MaterialDesign-JS) |
| ReactJS | npm install @mdi/react | MaterialDesign-React | [](https://github.com/Templarian/MaterialDesign-React) |
| SVG / Meta.json | npm install @mdi/svg | MaterialDesign-SVG | [](https://github.com/Templarian/MaterialDesign-SVG) |
| Desktop Font | n/a | MaterialDesign-Font |

Upgrade Guide | Changelog Guide

[](https://materialdesignicons.com/)

Warning (Cordova only): _You will need to manually edit the css file to remove the version query string. Read More._

Contribute Copy Chapter

Please do not make pull requests against this repositiory. All icons are managed through the Material Design Icons site by the various contributors and synced instantly. If you want to become a contributor read more.

Icon Suggestions Copy Section

Submit icon suggestions through the issue tab. Please include examples.

Third Party (Plugins / Extensions / etc) Copy Section

- Third Party Guide
- First Party Guide

License Copy Chapter

View the License

Code of Conduct Copy Chapter

View and submit violations.

---

Resources/Svg/Icons/Octicons/README (resources/svg/icons/octicons/README.md) Copy Section

<br>
<br>
<h1 align="center">Octicons</h1>

<p align="center">Octicons are a set of SVG icons built by GitHub for GitHub.</p>

<p align="center">
<a aria-label="build status" href="https://github.com/primer/octicons/actions/workflows/ci.yml">
<img alt="" src="https://github.com/primer/octicons/actions/workflows/ci.yml/badge.svg?branch=main&event=push">
</a>
<a aria-label="publish status" href="https://github.com/primer/octicons/actions/workflows/publish.yml">
<img alt="" src="https://github.com/primer/octicons/actions/workflows/publish.yml/badge.svg">
</a>
</p>

Libraries Copy Chapter

This repository contains several libraries. Each of them is in the lib/ folder and gives access to Octicons on a different platform/language.

JavaScript Copy Section

The octicons node.js library is the main JavaScript library. With a JavaScript API that can be used in a variety of applications.

| Package | Version |
| ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| @primer/octicons <br />Node.js package with Javascript API | [](https://www.npmjs.org/package/@primer/octicons) |
| @primer/octicons-react <br />React Octicons components | [](https://www.npmjs.org/package/@primer/octicons-react) |
| @primer/styled-octicons <br />React Octicons components with Styled System props | [](https://www.npmjs.org/package/@primer/styled-octicons) |

Ruby Copy Section

| Package | Version |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| octicons <br />Ruby gem with Ruby API | [](https://rubygems.org/gems/octicons) |
| octicons_helper<br />Rails helper for using octicons | [](https://rubygems.org/gems/octicons_helper) |
| jekyll-octicons<br />Jekyll plugin for using octicons | [](https://rubygems.org/gems/jekyll-octicons) |

Contributing Copy Chapter

Feedback, ideas, and bug reports Copy Section

If you have feedback and ideas for improvement, open a new issue in this repo, using the appropriate issue template.

Request a new icon (GitHub staff only) Copy Section

To request a new icon, open an issue using the icon request template in github/primer.

Adding or updating an icon Copy Section

Read through our contributing guide if you want to add or update icons.

License Copy Chapter

(c) GitHub, Inc.

When using the GitHub logos, be sure to follow the GitHub logo guidelines.

_Code License:_ MIT
Applies to all other files

---

Resources/Svg/Icons/Open Iconic/README (resources/svg/icons/open-iconic/README.md) Copy Section

Open Iconic v1.1.1
===========

Open Iconic is the open source sibling of Iconic. It is a hyper-legible collection of 223 icons with a tiny footprint&mdash;ready to use with Bootstrap and Foundation. View the collection Iconic. It is a hyper-legible collection of 223 icons with a tiny footprint&mdash;ready to use with Bootstrap and Foundation. View the collection')" title="Copy section prompt for LLMs"> Copy Section

What's in Open Iconic? Copy Chapter

* 223 icons designed to be legible down to 8 pixels
* Super-light SVG files - 61.8 for the entire set
* SVG sprite&mdash;the modern replacement for icon fonts
* Webfont (EOT, OTF, SVG, TTF, WOFF), PNG and WebP formats
* Webfont stylesheets (including versions for Bootstrap and Foundation) in CSS, LESS, SCSS and Stylus formats
* PNG and WebP raster images in 8px, 16px, 24px, 32px, 48px and 64px.

Getting Started Copy Chapter

#### For code samples and everything else you need to get started with Open Iconic, check out our Icons and Reference sections.

General Usage Copy Section

#### Using Open Iconic's SVGs

We like SVGs and we think they're the way to display icons on the web. Since Open Iconic are just basic SVGs, we suggest you display them like you would any other image (don't forget the alt attribute).

<img src="/open-iconic/svg/icon-name.svg" alt="icon name">

#### Using Open Iconic's SVG Sprite

Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack.

Adding an icon from an SVG sprite is a little different than what you're used to, but it's still a piece of cake. Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag.

<svg class="icon">
  <use xlink:href="open-iconic.svg#account-login" class="icon-account-login"></use>
</svg>

Sizing icons only needs basic CSS. All the icons are in a square format, so just set the <svg> tag with equal width and height dimensions.

.icon {
  width: 16px;
  height: 16px;
}

Coloring icons is even easier. All you need to do is set the fill rule on the <use> tag.

.icon-account-login {
  fill: #f00;
}

To learn more about SVG Sprites, read Chris Coyier's guide.

#### Using Open Iconic's Icon Font...

##### …with Bootstrap

You can find our Bootstrap stylesheets in font/css/open-iconic-bootstrap.{css, less, scss, styl}

<link href="/open-iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet">

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

##### …with Foundation

You can find our Foundation stylesheets in font/css/open-iconic-foundation.{css, less, scss, styl}

<link href="/open-iconic/font/css/open-iconic-foundation.css" rel="stylesheet">

<span class="fi-icon-name" title="icon name" aria-hidden="true"></span>

##### …on its own

You can find our default stylesheets in font/css/open-iconic.{css, less, scss, styl}

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">

<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

License Copy Chapter

Icons Copy Section

All code (including SVG markup) is under the MIT License.

Fonts Copy Section

All fonts are under the SIL Licensed.

---

Resources/Svg/Icons/Pe Icon 7 Stroke/Read Me (resources/svg/icons/pe-icon-7-stroke/read-me.txt) Copy Section

---------------------------------------------
PIXEDEN // Font ICON DETAILS
---------------------------------------------

Open reference.html to see a list of all the glyphs in the icon font.

Open documentation.html for details on how to use the icon font.

FEEDBACK:
We want our icon fonts to be as good as they can be.
If you have issues, recommendations, ideas for new icons please let us know here:
[email protected]

---------------------------------------------
PIXEDEN // Resource license terms
---------------------------------------------
All our resources are royalty free for use in both personal and commercial projects.

You can modify any resources to your liking to fit into your project, we are however not legally liable for any misuse of our resources.

We do not ask for you to include any attribution or link back to Pixeden.com, we do however appreciate if you do credit our resources or/and help spread the word about us.

You cannot however redistribute, resell, lease, license, sub-license or offer our resources to any third party. This includes uploading our resources to another website, marketplace or media-sharing tool, and offering our resources as a separate attachment from any of your work. If you do plan to include one of our resource on an item or template that will be sold on a website or marketplace, we ask of you to contact us to determine the proper use of our resource before doing so.

Premium files downloaded with a premium account can be used in a item or website template sold through a marketplace or directly on a website with no attribution required. You cannot however resell or redistribute those premium files as is. Please contact us before using those files in this way to ensure that you abide by our license. IMPORTANT you cannot use any resources from the psd web templates category to create a website theme or template to be sold. They can only be used for personal and commercial projects.

If you would like to share one of our resource you can do so making a link to the specific resource page on Pixeden.com or/and use our preview images. No HOTLINKING is allowed i.e. you cannot make a direct link to the download or/and the images hosted on Pixeden.com.

---------------------------------------------
Find more great resources @ Pixeden.com
Sincerely,
The Pixeden Team.
---------------------------------------------
http://www.pixeden.com
PS. Those terms might change as we update our license on our website, please be sure to check the latest license terms on our website to avoid any misuse of our resources.
Thank you.

---

Resources/Svg/Icons/Remix Icon/README (resources/svg/icons/remix-icon/README.md) Copy Section

[](https://remixicon.com)

[](https://www.npmjs.com/package/remixicon)
[](https://www.npmjs.com/package/remixicon)
[](https://www.jsdelivr.com/package/npm/remixicon)
[](https://spectrum.chat/remixdesign/remixicon)
[](https://remixicon.com/#donate)

English | 简体中文

Suspension Notification

Remix Icon is a set of open-source neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid. Of course, all the icons are free for both personal and commercial use.

[](https://remixicon.com)
View the full set of Remix Icons at remixicon.com.

Usage Copy Chapter

Basic Usage Copy Section

Just click the icons you want from remixicon.com, and then you can download the icons in SVG or PNG format.

Designers can click the Copy SVG button and then press ⌘+V or Ctrl+V to paste the vector graphic into your design tool directly, easy and simple.

We recommend that designers download or copy icons from our website when needed instead of managing all of them in a local folder. The website's search engine allows you to quickly locate the icon you are looking for and the icons on the website are being continuously updated.

> The Copy SVG now supports Sketch, Figma, Adobe XD, Adobe Illustrator, Affinity Designer, Affinity Photo, etc.

Using SVG on the web is as simple as JPEG or PNG. Such as:

<img height="32" width="32" src="img/admin-fill.svg" />

Webfont Usage Copy Section

Note: You can import Remix Icon with npm install, cdn or download it manually.

#### Installation

Note: If you'd like to use Remix Icon with a CDN, you can skip this installation step.

npm install remixicon --save

import 'remixicon/fonts/remixicon.css'

import CSS to your main.js

#### CDN
Copy the following code and add it to the &lt;head&gt; tag of your html document.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">

==Important Note:== We've changed our CDN service to jsDelivr from v2.2.0, and the previous CDN service will be terminated on Jan 30, 2020. Please replace your old CDN to the new link above so as not to affect your business. We apologize for the inconvenience.

> The @2.5.0 in the CDN link can be changed to any history version we've published.

#### Download Manually

Download remixicon.css file, add it to the &lt;head&gt; tag of your html document.

#### Use

Add icon with class name, class name rule: ri-{name}-{style}

<i class="ri-admin-line"></i>
<i class="ri-admin-fill"></i>

Note: We changed the class name prefixes from remixicon- to ri from v2.0.0;

Note: You can go to remixicon.com to check the name of the icons. -line means the outlined style icon, and -fill means the filled style icon.

#### Sizing

RemixIcon can be resized by css class integrated by remixicon.css . Icons inherit the font-size of their parent container and with the following classes you can increase or decrease the size of icons relative to that inherited font-size. You can also use ri-fw class for a fixed width for icons. For example:

<div style="font-size: 24px;">
  <i class="ri-admin-line ri-fw"></i> 
  <i class="ri-admin-line ri-xxs"></i> 
  <i class="ri-admin-line ri-xs"></i> 
  <i class="ri-admin-line ri-sm"></i> 
  <i class="ri-admin-line ri-1x"></i> 
  <i class="ri-admin-line ri-lg"></i> 
  <i class="ri-admin-line ri-xl"></i> 
  <i class="ri-admin-line ri-2x"></i> 
  <i class="ri-admin-line ri-3x"></i> 
  ...
  <i class="ri-admin-line ri-10x"></i> 
</div>

You can check the remixicon.css file for more info and details.

SVG Sprite Usage Copy Section

Download remixicon.symbol.svg file into your project directory，use icons with the <use> element, such as:

<svg class='remix'>
  <use xlink:href="your-path/remixicon.symbol.svg#ri-admin-fill"></use>
</svg>

.remix {
  width: 24px;
  height: 24px;
  fill: #333;
}

Note: ri-admin-fill after the # in the above example can be replaced with any valid icon name of Remix Icon. You can go to remixicon.com to check the name of the icons. -line means the outlined style icon, and -fill means the filled style icon.

Contributing Copy Chapter

Note: In order to ensure the quality of each icon, we currently do not accept third-party drawn icons. If you want to contribute an icon to Remix Icon, you can create an issue with a screenshot or url to your svg-format file. If you are not familiar with github, you can also email us directly [email protected].

Icon Request Copy Section

If there is no suitable icon for your usage scenario, you can create an issue with a title of "Icon request: <Icon name>" and fill the issue template.

RemixIcon is mainly focuses on user interface icons. If we did not include the logo icons you were looking for, I recommend this icon library - Simple Icons

Icon Search Keywords Copy Section

We use tags.json file to manage the search keywords of our website. But at the moment, we don't have a good automatic method to complete the keywords for each icon. So we hope you can help us to improve the tags.json file by creating issues, sending emails or "pull request" of tags.json file to make the search engine better. Especially when one of our icons matches your scene but you don't find the icon with your keywords.

Sub-projects Copy Chapter

License Copy Chapter

Remix Icon is licensed under the Apache License Version 2.0. Feel free to use these icons in your products and distribute them. We would be very grateful if you mention "Remix Icon" in your product info, but it's not required. The only thing we ask is that these icons are not for sale.

---

Resources/Svg/Icons/Tabler Icons/README (resources/svg/icons/tabler-icons/README.md) Copy Section

<p align="center">
<img src="https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/og.png" alt="Tabler Icons" width="838">
</p>

<p align="center">
A set of over 1450 free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.
<p>

<p align="center">
<a href="https://tabler-icons.io/"><strong>Browse at tabler-icons.io &rarr;</strong></a>
</p>

<p align="center">
<a href="https://github.com/tabler/tabler-icons/releases"><img src="https://img.shields.io/npm/v/@tabler/icons" alt="Latest Release"></a>
<a href="https://github.com/tabler/tabler-icons/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/@tabler/icons.svg" alt="License"></a>
</p>

Sponsors Copy Chapter

If you want to support my project and help me grow it, you can become a sponsor on GitHub or just donate on PayPal :)

<a href="https://github.com/sponsors/codecalm">
<img src='https://raw.githubusercontent.com/tabler/static/main/sponsors.png'>
</a>

Preview Copy Chapter

<p align="center">
<img src="https://raw.githubusercontent.com/tabler/tabler-icons/master/.github/icons.png" alt="Tabler Icons preview" width="838">
</p>

Sponsor Tabler Copy Chapter

<a href="https://github.com/sponsors/codecalm" target="_blank"><img src="https://github.com/tabler/tabler/raw/dev/src/static/sponsor-banner-readme.png?raw=true" alt="Sponsor Tabler" /></a>

Installation Copy Chapter

npm install @tabler/icons --save

or just download from Github.

Usage Copy Chapter

All icons are built with SVG, so you can place them as <img>, background-image and inline in HTML code.

HTML image Copy Section

If you load an icon as an image, you can modify its size using CSS.

<img src="path/to/icon.svg" alt="icon title" />

Inline HTML Copy Section

You can paste the content of the icon file into your HTML code to display it on the page.

<a href="">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="icon icon-tabler icon-tabler-disabled"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    stroke-width="1.25"
    stroke="currentColor"
    fill="none"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    ...
  </svg>
  Click me
</a>

Thanks to that, you can change the size, color and the stroke-width of the icons with CSS code.

.icon-tabler {
  color: red;
  width: 32px;
  height: 32px;
  stroke-width: 1.25;
}

SVG sprite Copy Section

Add an icon to be displayed on your page with the following markup (activity in the above example can be replaced with any valid icon name):

<svg width="24" height="24">
  <use xlink:href="path/to/tabler-sprite.svg#tabler-activity" />
</svg>

React Copy Section

Import the icon and render it in your component. You can adjust SVG properties through React props:

import { IconAward } from '@tabler/icons';
const MyComponent = () => {
  return <IconAward 
    size={36} // set custom width and height
    color="red" // set stroke color
    stroke={3}  // set stroke-width
    strokeLinejoin="miter" // override other SVG props
  />
}

@tabler/icons exports it's own type declarations for usage with React and Typescript.

Angular Copy Section

Angular components available through angular-tabler-icons package.
Install the package, then create icons module:

``ts
import { NgModule } from '@angular/core';

import { TablerIconsModule } from 'angular-tabler-icons';
import { IconCamera, IconHeart, IconBrandGithub } from 'angular-tabler-icons/icons';

// Select some icons (use an object, not an array)
const icons = {
IconCamera,
IconHeart,
IconBrandGithub
};

@NgModule({
imports: [
TablerIconsModule.pick(icons)
],
exports: [
TablerIconsModule
]
})
export class IconsModule { }


After importing the _IconsModule_ in your feature or shared module, use the icons as follows:

angular-tabler-icons exports it's own type declarations for usage with Typescript.
For more usage documentation refer to the official documentation.
Vue  Copy Section
Vue components available through vue-tabler-icons package.
Install the package, import the icon component and render it in your component. You can adjust SVG properties by passing regular HTML attributes:

vue-tabler-icons exports it's own type declarations for usage with Typescript.
For more usage documentation refer to the official documentation.
CDN  Copy Section
All files included in @tabler/icons npm package are available over a CDN.
#### React icons

#### Iconfont

To load a specific version replace latest with the desired version number.

Compiling fonts  Copy Section
To compile fonts first install fontforge.
When compiling the font it will look for a json file compile-options.json in root folder (same folder as the package.json) In this file you can define extra options:
The default settings if you have not defined the file will be:

The fontforge executable needs to be in the path or you can set the path to the downloaded fontforge executable in the configuration file. If you installed in on a mac in your application directory it will be /Applications/FontForge.app/Contents/MacOS/FontForge. You can set this value in the compile-options.json file.

To compile the fonts run:

By default the stroke width is 2. You can change the stroke width in the compile-options.json

To reduce the font file size you can choose to compile a sub set of icons. When you leave the array empty it will compile all the fonts. To compile only two icons you can set for example the folowing option in the compile-options.json:

You can use tabler-icons-svelte to use icons in your Svelte projects (see example):

<script>
    import { CurrencyBitcoin, BrandGithub, CircleX } from "tabler-icons-svelte";
</script>
<CurrencyBitcoin />
<BrandGithub size="48" strokeWidth="1" />
<CircleX />

Jetpack Compose Copy Section

For Android or Desktop you can use compose-icons to use icons in your projects. (see docs)

Multiple strokes Copy Chapter

All icons in this repository have been created with the value of the stroke-width property, so if you change the value, you can get different icon variants that will fit in well with your design.

License Copy Chapter

Tabler Icons is licensed under the MIT License.

---

Resources/Svg/Icons/Tabler Icons/LICENSE (resources/svg/icons/tabler-icons/LICENSE.txt) Copy Section

MIT License

Copyright (c) 2020 Paweł Kuna

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

---

Resources/Svg/Icons/Themify/Readme (resources/svg/icons/themify/readme.txt) Copy Section

=====================================
HOW TO USE IT:

1) Upload the ‘themify-icons.css’ file and ‘fonts’ folder to your server

2) Add the CSS file into the <head> section of your site:
<link href="http://yoursite.com/themify-icons.css" rel="stylesheet">

3) Add the icon markup in your page:
<span class="ti-download"></span>

All icons can be viewed at: http://themify.me/themify-icons


=====================================
LICENSE

- Themify Icons font licensed under: http://scripts.sil.org/OFL
- Code licensed under: http://opensource.org/licenses/mit-license.html
- All brand icons are copyright/trademarks of their respective owners.


=====================================
VERSIONS

Version 1.0.1 (May 27, 2014)
- Added SVG format
- Fixed some icon naming issues
- Added rss icon

Version 1.0.0 (May 16, 2014)
- Initial release

---

Resources/Svg/Icons/Unicons/README (resources/svg/icons/unicons/README.md) Copy Section

Unicons

1000+ Pixel-perfect vector icons and Iconfont for your next project. These icons are designed by Iconscout.

Getting Started Copy Chapter

Using as a font Copy Section

It's easy to use Unicons on your website by just inserting following css. You can also download this repo and use the css from css folder.

<link
  rel="stylesheet"
  href="https://unicons.iconscout.com/release/v4.0.0/css/unicons.css"
/>

And use the icons in your body as below.

<i class="uil uil-comments"></i>

Using as npm package Copy Section

You can easily install Unicons using npm.

npm install --save @iconscout/unicons

Using as an SVG Copy Section

If you're a designer then it's always great to have SVG files. You can download SVGs from Official Unicons Website or download Icondrop to access these icons right into Sketch, Adobe Xd, Adobe Illustrator, and many more.

Using in Flutter Framework Copy Section

There's a Flutter package created by Pedro Lemos, avaliable in pub.dev, which can be easily used in your project.

Just add the dependency in your pubspec.yaml file as following:

dependencies:
  unicons: ^1.0.0+2

Then, run the command above:

flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Now, in your Dart code, import the package:

import 'package:unicons/unicons.dart';

Use with JS Frameworks Copy Section

We've created components for popular libraries like React, VueJS, React Native. You can head over to official GitHub Repo to know more.

#### Line Style

- For React: https://github.com/Iconscout/react-unicons
- For VueJS: https://github.com/Iconscout/vue-unicons
- For React Native: https://github.com/Iconscout/react-native-unicons

#### Solid Style

- For React: https://github.com/Iconscout/react-unicons-solid
- For VueJS: https://github.com/Iconscout/vue-unicons-solid

#### Monochrome Style

- For React: https://github.com/Iconscout/react-unicons-monochrome

More ways (Community supported) Copy Section

- Vue-unicons by Anton Reshetov

Roadmap Copy Chapter

- [x] Make React Components
- [x] Adding Brand Icons
- [x] Designing Solid Style
- [ ] Designing Thin-line Style
- [ ] Support for CSS Animations
- [ ] Make SVG Sprite in which user can control different attributes such as stroke, fill, width, height and more.

Contributing Copy Chapter

We will be happy to have community support for Unicons. Feel free to fork and create pull requests. We have given a small roadmap above so that you can help us build these features.

Icon Requests Copy Section

We've created a thread at Iconscout Community where you can request for new icons. And we'll be happy to design them in upcoming weeks.

License Copy Chapter

Unicons are Open Source icons and licensed under Apache 2.0. You're free to use these icons in your personal and commercial project. We would love to see the attribution in your app's about screen, but it's not mandatory.

Unicons by <a href="https://iconscout.com/">Iconscout</a>

---

.Github/FUNDING.Yml (.github/FUNDING.yml) Copy Section

These are supported funding model platforms

custom: https://paypal.me/zgivan
open_collective: vvvebjs

---

.Github/Lock.Yml (.github/lock.yml) Copy Section

Configuration for Lock Threads - https://github.com/dessant/lock-threads

Number of days of inactivity before a closed issue or pull request is locked

follow ISO 8601 (YYYY-MM-DD). Set to false to disable

Issues and pull requests with these labels will be ignored. Set to [] to disable

Label to add before locking, such as outdated. Set to false to disable

Comment to post before locking. Set to false to disable

Assign resolved as the reason for locking. Set to false to disable

Limit to only issues or pulls

Optionally, specify configuration settings just for issues or pulls

Comment to post when closing an Issue for lack of response. Set to false` to disable

---