Towericons

An icon pack for the modern designer and developer.

Towericons is a flexible pack of +200 icons designed to be scalable and look modern, and built upon the principles of simplicity, consistency, and flexibility. The set covers all common needs and many uncommon, and it offers an editable SVG of each icon, together with its React component.

Quick links: Catalog · Design · React · Figma · Donate

Installation

# With npm 
$ npm install towericons --save
 
# Or, with yarn 
$ yarn add towericons

Usage

To reduce the size of your bundle, each icon is located in an individual file. While this will make your production code significantly lighter, it will also require one import statement for each icon you would like to use. Each statement must include the name of the icon:

import AlertCircle from 'towericons/AlertCircle';
import ChevronDown from 'towericons/ChevronDown';

However, Towericons also comes with a single file that includes the React component of each icon, so you can import multiple icons at once from the same file or import all files in the icon pack. Please, be aware that using this method will result in all icons included in your build bundle.

// Import muiltiple icons
import { Archive, ZoomIn } from 'towericons';
 
// Import all icons
import * from 'towericons';

No extra setup is necessary at this point. You can now start using the icon as a React component or pass it to another component as a prop:

// Use as a component
<AlertCircle />
 
// Use as a prop
<YourComponent icon={ZoomIn} />

Options, coming soon

Size, auto

Change the size of the icon. Towericons icons are designed in a 32px grid, so using a multiple of this size is recommended (16px, 24px, 32px or 48px).

<AlertCircle size={32} />
<ChevronDown size="24px" />
<ZoomIn size="auto" />

Color, undefined

Set a custom color for the icon. By default it is unspecified, so it will take the color defined by the CSS or, if there is no style applied, black.

<Archive color="blue" />
<ChevronDown color="#FFF000" />
<ZoomIn color="currentColor" />

Contributing

If you find any issue, have troubles figuring out something or want to suggest a change, please open an issue or make a pull request. You can also donate to keep the repo alive. Any kind of contribution is welcomed and very appreciated.

Local development

Clone the repository:

$ git clone https://github.com/nil/towericons
 
$ cd towericons

Install the dependencies:

$ npm install

To build the icons and components, Towericons takes the .svg files inside a zip folder named icons.zip. This is because the icons are designed in Figma and exported using the Dynamic Icon Export plugin, which exports every icon in multiple sizes.

# Generate both icons and components 
$ npm run build
 
# Only generate icons 
$ npm run build -s

Local design

To design a new icon or update an existing one, you must follow the design guidelines, though understand that sometimes is okay to brake these rules. There is a public Figma file containing the whole pack of icons, and a file with only the base grid is available for Figma, Sketch, Illustrator and in SVG.

Open a new issue with the icon request template if you are designing a new icon, or open an issue with the icon feedback template if you want to suggest changes to an existing icon. The issue can contain one or multiple variations of your icon. If you are designing in Figma or Adobe XD, make sure the link can be viewed by everyone.

License

Copyright © 2020 Nil Vila. Released under the MIT License.

---