— Bytedance commercial product CUX design team
IconPark is the bytedance commercial CUX design team carefully created to be committed to the standardization and unification of icon application, provide a variety of high-quality icon content, meet the batch configuration icon style ability; At the same time, technical students can call the icon component in the project, so that the icon use becomes simpler and more efficient.

ICONS are graphic symbols with referential meanings, which are highly concentrated, quickly convey information and easy to remember. It allows us to make quick decisions and find the information we are looking for with our short attention span, increasing our efficiency in information acquisition.

IconPark icon library is a set of 1300+ quantity and 28 categories of high quality basic icon site, at the same time with personalized skin configuration ability, through the skin attribute configuration can be extended to millions of icon styles. In the design to comply with the principle of simplification, unified style, clear meaning, can be applied to more scenes. Small size and flexible invocation guarantee the management collaboration between designers and developers.
support
Use of the three main code types:
  • react-icons​
  • ​vue-icons​ 
  •  ​svg-icons​

Project background

In fact, the original intention of this project is to meet the needs of internal design ICONS. Most of our team are B-end products, so there is a large demand for ICONS. There are great differences in icon styles among different platforms, so it is difficult to form a unified experience and cognition in brand experience. No matter designers or developers, there is no unified closure for the management and use of ICONS, resulting in high management costs. To solve these problems, we decided to do an internal icon library. Later, with the increase of the number of drawings, I found that it was a wealth of design, and I believed that it would also bring help to other people in need, so I put the target on open source, hoping to bring help to more students in need.

Design principles

  • accurate
  • Information graphics, accurately express the meaning of ICONS; Accurate display, reduce the appearance of serrations.
  • concise
  • The form and strokes are concise and simplified. Under the premise of guaranteeing the meaning, redundant details are removed.
  • available
  • By detecting the access status of ICONS, the identifiability and availability of ICONS are ensured.
  • unified
  • Ensure the unity of icon size, line thickness, emotional features, endpoint features, corner features, tilt Angle, basic shape, etc.

KeyLine and raster definition standards

Through the analysis and research of the icon, developed different from the conventional thinking of the Keyline drawing specification, we in the formulation of Keyline icon coordinate decimal point problem, so our Keyline is drawing version, requiring the path to fall on the Keyline when drawing, to a large extent can reduce the occurrence of coordinate decimal point, To ensure the best effect of the screen display.
Keyline specification ensures the uniformity of design ICONS, and its size, proportion and complexity will be standardized and clear. The grid is used as a reference for drawing icon elements and helps establish clear contouring boundaries;

Based on the shape

The basic shapes of ICONS are rectangle, square, circle and triangle.

Size of the icon

Icon drawing Is a linear icon drawn on a 48x48px canvas. The line width is 4px by default.

Constituent elements

  • ** line segment and endpoint: ** refers to the thickness of the line segment that constitutes the icon and the endpoint specification of the line segment;

  • ** Fracture and spacing: ** refers to the standard spacing between elements in the icon and fracture;

  • ** Angle of inclination: ** refers to the standard Angle of inclination for non-vertical and horizontal lines;

  • ** Corner degree: ** refers to the definition of the corner radian of ICONS based on certain rules, so as to standardize the corner degree of ICONS;

  • ** closed and non-closed: ** closed area is composed of closed curves, which can be filled with independent colors; The non-closed area is composed of non-closed curves and cannot be filled.

1. Line segments and dots

In order to ensure the overall consistency of style, the default style of all end points of line segments is circle. If there are dots with the same width as the line segment, to ensure visual balance, the diameter of dots should be slightly larger than the width of the line segment; The coordinates of endpoints and editable nodes are the best integers.

2. Spacing specification

The distance between the internal structure elements and the outer frame of the icon shall not be less than the line width; The spacing between internal elements should not be less than 1/2px of the line width; The recommended size gradient of the outline box is a multiple of 4, such as 4px, 8px, 12px, etc.

3. Tilt Angle

The line segment in the icon should be inclined at a multiple of 15 degrees, keeping it parallel to the diagonal or vertical cross in the Keyline;

4. Corner Settings

5, closed and non-closed

The closed and non-closed attributes of the icon determine whether it has the ability of icon style conversion. When the elements of the icon are closed graphics, it can be filled with independent colors. Otherwise, it cannot be filled with color transformation.
  • Closed figure:

  • Non-closed graph:

  • When the closed graph is a curve shape with intersecting line segments, independent color filling cannot be realized by IconPark technology in principle.

Icon naming conventions

Icon naming conforms to icon meaning, unified naming format, adding classification prefix for distinction; More convenient for later management and maintenance;

  • Chinese name
Chinese name should be Chinese name, easy to understand, unambiguous principle, when expressing the state with “-” link;
Example: Favorites, like, Square, Rectangle, folder – Download, folder – Add
  • The English name
English name should be lowercase, multiple words are separated by a horizontal bar, there can be no capital letters, Spaces, special symbols, long words, compound words can be abbreviated as the case;
Examples: collection, like, square, distance, Folder-download, folder-add
  • Name the icon with the same meaning
Multiple ICONS with the same meaning can be distinguished by suffixes and numbers.
Example: like, like-one, like-two

Icon style configuration scheme

1. Linear ICONS

Adaptation specification:
  • The internal element and external element attributes of the icon remain unified. When there is a fill, the transparency of the fill color is 0%.

2. Fill the icon

Adaptation specification:

  • When there is a close between the inner element and the outer element, the closed element fills and the non-closed element keeps the stroke.

  • When the inside element of the icon overlaps with the outside element, it is resolved by adding a line with the outside stroke attribute when it is vertical. When it is not vertical, padding is not recommended

3. Two-color ICONS

Adaptation specification:
  • Icon external elements (closed/open) and icon elements (closed/open) attributes keep unity;

**4, ** four-color icon

Adaptation specification:

  • The element outside the icon is closed, and the element inside the icon is closed.

  • When the outer element of the icon is closed and the inner element is not closed, use the 3-color scheme.

Icon element separation, Layer Style establishment;

C1= outside (open/closed) – Stroke
C2= out (closed) -fill
C3= Inside (open/closed) – Stroke
C4= inside (closed) – fill
** Color scheme: **
Color sequence (converging at 4 colors) :(1) #000; (2) #FFF; (3) #2F88FF; (4) 43 ccf8 #

** Icon example **
Wireframe, fill, two-color, four-color

Project summary

Now the basic services of the entire icon library have been developed and put into use within Bytedance, which is warmly welcomed by all business teams. The overall usage of ICONS is also positive, with significant data improvement every week and month. By 2020-09-02, the total number of downloads has exceeded 110,000. The peak number of downloads of NPM package in a single week has reached 7,300 +, and the number of downloads in the latest month is nearly 30,000, which has been introduced by nearly 50 front-end frameworks of each department as a dependency package
It is precisely because of this much dependence, we officially open source the icon library to more people to use, hope to bring help to more people, but also welcome you to provide more suggestions and requirements, together to make the icon library better.

Website experience and usage guide

  • IconPark

  • Iconpark Usage Guide

  • IconPark open source icon library

The code address

  • Github address: github.com/bytedance/I…

  • NPM download:

  • @icon-park/react

  • @icon-park/vue

  • @icon-park/svg

  • If you have any good suggestions or problems, can you give feedback and let us know

  • If you feel good, you can help click 🌟🌟Star🌟🌟 to encourage us

Contact us