Intro

The icon creation kit helps lines of business create high-quality, consistent icons for specific needs. By using existing assets and clear design guidance, teams can create icons efficiently. The result aligns with the broader visual language while still supporting unique use cases.

At the core of the kit is a comprehensive line icon library. It includes a wide range of ready-made icons that you can adapt and modify. This lets users customize visuals without starting from scratch.

The kit focuses on creating and handling SVG assets. You can also use it to prepare line icons for integration into the SAP icon font. This supports both SVG-based and font-based icon workflows.

For best results, always use the kit together with the icon guidance. Combined, they provide the tools, standards, and direction you need to create cohesive, high-quality icon sets.

Open Icon Creation Kit in Figma

Get Started

Icon design guideline

Start by reviewing the latest icon design guidelines. Always use the kit together with the guidelines to ensure a consistent visual style.

Icon creation process

Review the icon creation process to understand the steps for creating and implementing icons.

Enabling the UI kit in Figma

1. In any file, new or existing, open the Assets panel on the left. Select the Libraries icon at the top right of the panel.
2. In the Libraries dialog, enter "Icon Creation Kit" in the search field at the top. Turn on the switch to activate the library.

Inside the Kit

Read Me

The Read Me section is the main entry point to the icon creation kit. It gives you quick access to all key resources, including links to the icon guidance, the SVG library, and the icon request page.

Change log

The change log documents all updates and modifications to the icon creation kit over time. It provides transparency on additions, improvements, and fixes. Use it to stay up to date and understand how the kit evolves.

Line icon library

The line icon library contains the full set of icons from the current SVG icon library in vector line form. These simplified icons are easier to edit than fully expanded SVG files, which makes them ideal for customization and adaptation. Use this library when modifying existing icons for specific use cases while keeping visual consistency.

Expanded icon library

The expanded icon library links to the icon set in fully expanded form. All strokes are outlined, and the icons are finalized and ready for export. Use this library when placing icons in prototypes, Figma files, presentations, or other deliverables where no further editing is needed.

Asset library

The asset library includes reusable elements that form the foundation of many icons in the system. You can detach, combine, and modify these assets to create icons from scratch while staying consistent with the overall style. The library is organized into the following subcategories:

• Base shapes: Basic forms, such as documents, people, or geometric shapes, that define the core structure of most icons. Use them on their own or combine them with additional shapes.
• Additional shapes: Smaller supporting elements that you can layer on base shapes or combine with each other to build more complex icons.
• Negative shapes: Primarily used for filled icons. Negative shapes replace base or additional shapes. They mirror the same forms but use a thicker stroke weight of 2 px to ensure proper visual balance.
• Helpers: Supporting tools, such as the icon grid. Align all icons to the grid to keep consistency, proportion, and spacing across the system.

Related Links