Central Icon System

Every icon is a component with 30 variants.

Each icon variation is hand crafted in Figma. This ensures consistency and quality across the entire set. All variations can be accessed directly through the Figma property panel.

​

The plugin.

Streamline your design workflow with Iconists' plugin for Figma, making the central icon system a breeze to use.

• Fast Search: The icons are named both semantically and symbolically, making it incredibly easy to find exactly what you need.
• Fully customizable: Adjust Solid or Lined, Stroke Width, and Corner Style easily through a simple options panel.
• Multiple export: Due to popular demand now supporting exporting icons as SVG, React, React Native, and Solid.js.

​

The grid.

The foundation of any icon set lies in the pixel and icon grid with its key shapes. Thats why Iconsists have used their extended icon grid to maintain the consistency they're used to. 

• 24 x 24 grid. The icons are positioned on a 24px grid and have a 2px padding/safe area, resulting in a 20x20px live area. This ensures that the icons are designed with a consistent and adaptable structure, allowing them to be easily implemented in various contexts and interfaces.
• Key shapes for consistency. These key shapes are essential for creating icons with a balanced visual consistency. It's generally best to stay within the 20 x 20 px live area, but keep in mind that they're merely guidelines.

​

The system.

Iconsists focused on creating icons that should serve as a standard, without using decorative styles that make it difficult to adapt entire icon sets to the brand. Simple shapes and rules that can easily be adapted to suit any brand.

• Available in 3 weights. Icons in three distinct weights, ensuring that you have access to the most widely-used styles in the industry. With this versatile collection, you can easily find the perfect icon to match your design preferences, whether you're looking for a bold and impactful style, a sleek and modern touch, or a balanced and adaptable option.
• 5 different corner styles. Adding even more variety to the icon system, each icon is available in 5 different corner styles to further personalize your design experience. By combining these corner styles with three weights, you'll have access to an almost endless array of style possibilities! This allows you to mix and match elements to create the perfect blend of visual aesthetics for your website.
• Everything in line and solid. This is more than just copy, paste and fill. When it comes to the filled versions, Iconists carefully review and adjust each icon as needed to guarantee a flawless visual appearance. This attention to detail ensures that both filled and outlined icons in the system meets your design expectations.