Creating a set of consistent icons and animations

The aim of this personal project has been to design a consistent line style icon set. The system can grow infinitely thanks to the creation of a strong style and detailed guidelines. It has more than 8000 downloads in Figma community!

See it in Figma
200 Icon Set and Guidelines Main

Inspiration

Inspiration Air BnB Icons
Zach Roszczewski. Designer of the AirBnB Icons

Collection

200 Icons Collection
Growing set of more than 200 icons
Mockup Icons Paper

Guidelines

Each icon has been reduced to its minimal form. All of them have been designed based on the guidelines defined by the basic shapes: square, circle and rectagle.

Icon Grid Circle Circle: 18px
Icon Grid Square Square: 18px
Icon Grid Rectangle Rectangle: 16x20px

Naming

Icons have been organised in 10 different collections and named: Collection / Name / Size / Mode.

  • General Icon

    General

  • Layout Icon

    Layout

  • Edition Icon

    Edition

  • Social Icon

    Social

  • Medical Icon

    Medical

  • Food Icon

    Food

  • Travel Icon

    Travel

  • Tech Icon

    Tech

  • Media Icon

    Media

  • Business Icon

    Business

Icon Grid Measures
Icon Grid Measures

Animations

Some icons have been animated based on animation guidelines. Animations are useful to emphasize different states or to call the users attention.

  • Grid animated icon
  • Chrono animated icon
  • Girl Boy animated icon
  • Sun Moon animated icon
  • Trash animated icon
  • Plus animated icon

Workflow for animations

Figma Logo Design: Figma
After Effects Logo Animation: Affter effects
Lottie Logo HTML: Lottie

AEUX is an useful plugin to import designs from Figma to AE. Using Lottie developers can implement complex but low weight animations in seconds. Animations will be available for download soon!