Figma

icanicon.io Figma Plugin

icanicon.io is a middleware between your Design System and its real applications. It allows you to keep your icon libraries in sync by processing any vector graphics and transforming them into ready-to-use, clean code components.

 The plugin enables you to directly push any updates or changes to icanicon.io so that your engineering team will be able to fetch the latest version for any given framework at any time.

How your Figma file is interpreted:
• Frame, Component, Instance = Icons
• Group = Segment
• Page = (irrelevant)
• File = Board

Good to know
• You can download a template in case you are uncertain about the structure: https://icanicon.io/syncing-figma-files
• Avoid including mockups, larger components or other elements that are not meant to be icons in your export file.
• Choose your file naming-convention wisely as these names will automatically be carried over to your codebase.
Supported formats:
• React (.js)
• Vue (.js)
• Angular (.js)
• ReactNative (.js)
• Android (.xml)
• iOS (.pdf)
• Meteor (.html)
• Icon Font (.ttf)
• Custom File (Create your own template with any given file-ending and structure)
• Vector Graphic (.svg) (as a clean version stripped off everything unnecessary)
• Pixel Graphic (.png) (with any size you like)
• Portable Document (.pdf)

Export options:
• Manual Export: Download any singular icon or bulks in any format even simultaneously.
• API Access: Use your token to fetch any icon, segment or board you like. This also opens up the possibility of file-less rendering
• Sync Command: In your icon directory execute our ii-client command to sync your assets locally