FOUNDATIONS

Iconography

Icons are used to enhance the interface and facilitate navigation. These visual elements are designed to convey information clearly and effectively, minimizing cognitive load and improving user understanding. Use icons to highlight actions, commands, or specific sections, and make sure each icon has a defined purpose.

Variants

Auto Layout

Text properties

🔗 Synced with Figma Design library

Size

Icon sizes is to ensure clarity and visibility across various parts of the interface, enhancing usability and user experience.

 

  • 16px: Ideal for small interface elements like buttons and labels. These are the most commonly used.
  • 24px: Suitable for standard actions and navigation elements.
  • 32px: Used to improve interaction and highlight elements.
  • 40px: Used very exceptionally for larger, more prominent elements.

16px

24px

32px

40px

Stroke

Icons stroke size are thin, precise lines, creating a clean and modern look. The purpose of stroke size is to ensure icons are easily recognizable without overwhelming the interface.

 

The line weights have been carefully selected to perform optimally at different sizes, ensuring legibility, preserving an elegant style, and avoiding strokes from becoming indistinct at small sizes or too thin at larger sizes.

 

The line weights have been adjusted for each icon size:

 

  • Size 16px - stroke 0.8px
  • Size 24px - stroke 1px
  • Size 32px - stroke 1.3px
  • Size 40px - stroke 1.5px

 

This size-to-stroke relationship ensures a consistent visual experience across the interface, regardless of the icon size.

0.8px

1px

1.3px

1.5px

With 2px Safe area

Without Safe area

Safe area

As a rule, icons are used with a 2px Safe area. Here are some guidelines on when to use with safe area and without:

 

With 2px Safe area:

  • As a rule, use icons with a safe area to prevent them from appearing too close to other elements or the edge of a container. This helps improve readability and avoids making the design feel cramped or cluttered. It is useful in buttons, menus, or lists with limited space.

 

Without a Safe area:

  • Can be used in exceptional situations where the icon has enough space around it and there is no risk of overlapping with other elements or the edges of the design. This is ideal when seeking a precise and more compact fit and to improve alignment with other elements.

Icon source

This design system uses icons from external sources. We use stremline because it’s provides a large selection of icons with styles that match this design system.

2025 - Bubbles DS Experiment

FOUNDATIONS

Iconography

Icons are used to enhance the interface and facilitate navigation. These visual elements are designed to convey information clearly and effectively, minimizing cognitive load and improving user understanding. Use icons to highlight actions, commands, or specific sections, and make sure each icon has a defined purpose.

Variants

Auto Layout

Text properties

🔗 Synced with Figma Design library

Size

Icon sizes is to ensure clarity and visibility across various parts of the interface, enhancing usability and user experience.

 

  • 16px: Ideal for small interface elements like buttons and labels. These are the most commonly used.
  • 24px: Suitable for standard actions and navigation elements.
  • 32px: Used to improve interaction and highlight elements.
  • 40px: Used very exceptionally for larger, more prominent elements.

16px

24px

32px

40px

Stroke

Icons stroke size are thin, precise lines, creating a clean and modern look. The purpose of stroke size is to ensure icons are easily recognizable without overwhelming the interface.

 

The line weights have been carefully selected to perform optimally at different sizes, ensuring legibility, preserving an elegant style, and avoiding strokes from becoming indistinct at small sizes or too thin at larger sizes.

 

The line weights have been adjusted for each icon size:

 

  • Size 16px - stroke 0.8px
  • Size 24px - stroke 1px
  • Size 32px - stroke 1.3px
  • Size 40px - stroke 1.5px

 

This size-to-stroke relationship ensures a consistent visual experience across the interface, regardless of the icon size.

0.8px

1px

1.3px

1.5px

With 2px Safe area

Without Safe area

Safe area

As a rule, icons are used with a 2px Safe area. Here are some guidelines on when to use with safe area and without:

 

With 2px Safe area:

  • As a rule, use icons with a safe area to prevent them from appearing too close to other elements or the edge of a container. This helps improve readability and avoids making the design feel cramped or cluttered. It is useful in buttons, menus, or lists with limited space.

 

Without a Safe area:

  • Can be used in exceptional situations where the icon has enough space around it and there is no risk of overlapping with other elements or the edges of the design. This is ideal when seeking a precise and more compact fit and to improve alignment with other elements.

Icon source

This design system uses icons from external sources. We use stremline because it’s provides a large selection of icons with styles that match this design system.

2025 - Bubbles DS Experiment

FOUNDATIONS

Iconography

Icons are used to enhance the interface and facilitate navigation. These visual elements are designed to convey information clearly and effectively, minimizing cognitive load and improving user understanding. Use icons to highlight actions, commands, or specific sections, and make sure each icon has a defined purpose.

Variants

Auto Layout

Text properties

🔗 Synced with Figma Design library

16px

24px

32px

40px

Size

Icon sizes is to ensure clarity and visibility across various parts of the interface, enhancing usability and user experience.

 

  • 16px: Ideal for small interface elements like buttons and labels. These are the most commonly used.
  • 24px: Suitable for standard actions and navigation elements.
  • 32px: Used to improve interaction and highlight elements.
  • 40px: Used very exceptionally for larger, more prominent elements.

0.8px

1px

1.3px

1.5px

Stroke

Icons stroke size are thin, precise lines, creating a clean and modern look. The purpose of stroke size is to ensure icons are easily recognizable without overwhelming the interface.

 

The line weights have been carefully selected to perform optimally at different sizes, ensuring legibility, preserving an elegant style, and avoiding strokes from becoming indistinct at small sizes or too thin at larger sizes.

 

The line weights have been adjusted for each icon size:

 

  • Size 16px - stroke 0.8px
  • Size 24px - stroke 1px
  • Size 32px - stroke 1.3px
  • Size 40px - stroke 1.5px

 

This size-to-stroke relationship ensures a consistent visual experience across the interface, regardless of the icon size.

With 2px Safe area

Without Safe area

Safe area

As a rule, icons are used with a 2px Safe area. Here are some guidelines on when to use with safe area and without:

 

With 2px Safe area:

  • As a rule, use icons with a safe area to prevent them from appearing too close to other elements or the edge of a container. This helps improve readability and avoids making the design feel cramped or cluttered. It is useful in buttons, menus, or lists with limited space.

 

Without a Safe area:

  • Can be used in exceptional situations where the icon has enough space around it and there is no risk of overlapping with other elements or the edges of the design. This is ideal when seeking a precise and more compact fit and to improve alignment with other elements.

Icon source

This design system uses icons from external sources. We use stremline because it’s provides a large selection of icons with styles that match this design system.

2025 - Bubbles DS Experiment

Colors (Primitives)

Colors (Brand)

Typography

Spacings

Layouts

Design Tokens

Iconography

Borders 🔒

Elevations 🔒

Aspect Ratio 🔒

Focus 🔒

FOUNDATIONS

Iconography

Icons are used to enhance the interface and facilitate navigation. These visual elements are designed to convey information clearly and effectively, minimizing cognitive load and improving user understanding. Use icons to highlight actions, commands, or specific sections, and make sure each icon has a defined purpose.

Variants

Auto Layout

Text properties

🔗 Synced with Figma Design library

16px

24px

32px

40px

Size

Icon sizes is to ensure clarity and visibility across various parts of the interface, enhancing usability and user experience.

 

  • 16px: Ideal for small interface elements like buttons and labels. These are the most commonly used.
  • 24px: Suitable for standard actions and navigation elements.
  • 32px: Used to improve interaction and highlight elements.
  • 40px: Used very exceptionally for larger, more prominent elements.

0.8px

1px

1.3px

1.5px

Stroke

Icons stroke size are thin, precise lines, creating a clean and modern look. The purpose of stroke size is to ensure icons are easily recognizable without overwhelming the interface.

 

The line weights have been carefully selected to perform optimally at different sizes, ensuring legibility, preserving an elegant style, and avoiding strokes from becoming indistinct at small sizes or too thin at larger sizes.

 

The line weights have been adjusted for each icon size:

 

  • Size 16px - stroke 0.8px
  • Size 24px - stroke 1px
  • Size 32px - stroke 1.3px
  • Size 40px - stroke 1.5px

 

This size-to-stroke relationship ensures a consistent visual experience across the interface, regardless of the icon size.

With 2px Safe area

Without Safe area

Safe area

As a rule, icons are used with a 2px Safe area. Here are some guidelines on when to use with safe area and without:

 

With 2px Safe area:

  • As a rule, use icons with a safe area to prevent them from appearing too close to other elements or the edge of a container. This helps improve readability and avoids making the design feel cramped or cluttered. It is useful in buttons, menus, or lists with limited space.

 

Without a Safe area:

  • Can be used in exceptional situations where the icon has enough space around it and there is no risk of overlapping with other elements or the edges of the design. This is ideal when seeking a precise and more compact fit and to improve alignment with other elements.

Icon source

This design system uses icons from external sources. We use stremline because it’s provides a large selection of icons with styles that match this design system.

2025 - Bubbles DS Experiment

Colors (Primitives)

Colors (Brand)

Typography

Spacings

Layouts

Design Tokens

Iconography

Borders 🔒

Elevations 🔒

Aspect Ratio 🔒

Focus 🔒

FOUNDATIONS

Iconography

Icons are used to enhance the interface and facilitate navigation. These visual elements are designed to convey information clearly and effectively, minimizing cognitive load and improving user understanding. Use icons to highlight actions, commands, or specific sections, and make sure each icon has a defined purpose.

Variants

Auto Layout

Text properties

🔗 Synced with Figma Design library

16px

24px

32px

40px

Size

Icon sizes is to ensure clarity and visibility across various parts of the interface, enhancing usability and user experience.

 

  • 16px: Ideal for small interface elements like buttons and labels. These are the most commonly used.
  • 24px: Suitable for standard actions and navigation elements.
  • 32px: Used to improve interaction and highlight elements.
  • 40px: Used very exceptionally for larger, more prominent elements.

0.8px

1px

1.3px

1.5px

Stroke

Icons stroke size are thin, precise lines, creating a clean and modern look. The purpose of stroke size is to ensure icons are easily recognizable without overwhelming the interface.

 

The line weights have been carefully selected to perform optimally at different sizes, ensuring legibility, preserving an elegant style, and avoiding strokes from becoming indistinct at small sizes or too thin at larger sizes.

 

The line weights have been adjusted for each icon size:

 

  • Size 16px - stroke 0.8px
  • Size 24px - stroke 1px
  • Size 32px - stroke 1.3px
  • Size 40px - stroke 1.5px

 

This size-to-stroke relationship ensures a consistent visual experience across the interface, regardless of the icon size.

With 2px Safe area

Without Safe area

Safe area

As a rule, icons are used with a 2px Safe area. Here are some guidelines on when to use with safe area and without:

 

With 2px Safe area:

  • As a rule, use icons with a safe area to prevent them from appearing too close to other elements or the edge of a container. This helps improve readability and avoids making the design feel cramped or cluttered. It is useful in buttons, menus, or lists with limited space.

 

Without a Safe area:

  • Can be used in exceptional situations where the icon has enough space around it and there is no risk of overlapping with other elements or the edges of the design. This is ideal when seeking a precise and more compact fit and to improve alignment with other elements.

Icon source

This design system uses icons from external sources. We use stremline because it’s provides a large selection of icons with styles that match this design system.