Serendie Symbols currently offers two styles—Outlined (stroke) and Filled (solid)—with around 300 icons in each.

Use in Figma

In the Serendie UI Kit (Figma), the icons are componentized as “SerendieSymbols,” and you can select icons through variant properties just like UI components.

Use in React

We provide a library that exposes Serendie Symbols as SVG components for React. Icon names are shared with Figma. See GitHub for details.

These are the design principles and tips for Serendie Symbols. Keep them in mind when updating or adding icons.

Embrace the arc

Use the Arc (semicircle), the symbol of the Serendie brand, in your expression. However, avoid overusing arcs in ways that obscure meaning and hurt usability.

• Even if an element would not naturally include an arc, cutting a line to create an arc can emphasize Serendie’s identity.
• Generally, cut the line on the “outermost circle” to suggest an arc. Conversely, do not create arcs on inner circles.
• Arcs are especially effective on elongated shapes.

Bold silhouettes

Aim for clear shapes by emphasizing contrast between lines and corners. Focus on geometric forms while using organic shapes where appropriate.

• Combine bold shapes to create silhouettes with punch.
• Keep shapes flat and symmetrical without depth.
• Add small rounding to corners, keep stroke ends squared, and add subtle contrast to the shape.

Avoid surprising users

If using arcs risks changing the icon’s meaning, prioritize clarity over personality. Also round corners slightly to feel natural on screen.

• Add a bit of rounding to soften sharp impressions and make shapes approachable.
• Use negative space for an overall cheerful impression.

Anatomy

Icons are drawn with a 1.2px stroke width and a corner radius of 0.25. When adding gaps between paths, leave 1.6px between endpoints. Do not add caps or tips to open path ends.

Grid and keyline

To maintain consistent proportions across the icon system, use geometric keyline shapes placed on a 24dp x 24dp grid as guidelines.

Layout

The overall canvas is 24dp x 24dp with 2dp padding and a 20dp x 20dp live area. Keep the icon itself within the live area in principle. Portions may extend into the padding, but never beyond the trim area.

Stroke width

Use a 1.2px stroke width and do not add caps or tips to stroke ends. Set stroke position to “Center” to style shapes and lines consistently. The default is “Inside,” so be mindful of this setting.

Corner radius

Set corner radius to 0.25px to add slight softness to shapes.

Constraints

Apply “Scale” constraints on both axes so resizing the icon preserves proportions. Apply this constraint to the icon itself, not the surrounding frame (keep “Left” horizontally and “Top” vertically on the frame).

Unite

When finalizing an icon, select all elements and choose “Unite” from the context menu to flatten layers into a single vector path. This makes the finished icon easier to handle and to outline strokes depending on complexity.

Outline

Once the icon style is set, outline strokes to convert them into vector objects and prevent ratio changes when resizing.