Soracom

Blog
  1. Home
  2. Blog
  3. 2026 new icons

A roundup of recent icon updates

A complete overview of the 58 new icons added to the Soracom Design System over the last 6 months.

New icons

48px

Email

email-letter
CLASS: --icon-email-letter
IMG: /icon/basic/email-letter.svg
email-message
CLASS: --icon-email-message
IMG: /icon/basic/email-message.svg
email-note
CLASS: --icon-email-note
IMG: /icon/basic/email-note.svg
email-open
CLASS: --icon-email-open
IMG: /icon/basic/email-open.svg

Polygon and image editing

image-edit-select
CLASS: --icon-image-edit-select
IMG: /icon/basic/image-edit-select.svg
image-edit-shape
CLASS: --icon-image-edit-shape
IMG: /icon/basic/image-edit-shape.svg
image-polygon-edit-select
CLASS: --icon-image-polygon-edit-select
IMG: /icon/basic/image-polygon-edit-select.svg
image-polygon-edit-shape
CLASS: --icon-image-polygon-edit-shape
IMG: /icon/basic/image-polygon-edit-shape.svg
image-polygon-select
CLASS: --icon-image-polygon-select
IMG: /icon/basic/image-polygon-select.svg
image-polygon
CLASS: --icon-image-polygon
IMG: /icon/basic/image-polygon.svg
image-select
CLASS: --icon-image-select
IMG: /icon/basic/image-select.svg
edit-select
CLASS: --icon-edit-select
IMG: /icon/grid/edit-select.svg
polygon-edit-select
CLASS: --icon-polygon-edit-select
IMG: /icon/grid/polygon-edit-select.svg
polygon-edit-shape
CLASS: --icon-polygon-edit-shape
IMG: /icon/grid/polygon-edit-shape.svg
polygon-select
CLASS: --icon-polygon-select
IMG: /icon/grid/polygon-select.svg
polygon
CLASS: --icon-polygon
IMG: /icon/grid/polygon.svg
rectangle
CLASS: --icon-rectangle
IMG: /icon/grid/rectangle.svg

SIM

sim-arrow-dashed-top
CLASS: --icon-sim-arrow-dashed-top
IMG: /icon/gadgets/sim-arrow-dashed-top.svg
sim-arrow-top
CLASS: --icon-sim-arrow-top
IMG: /icon/gadgets/sim-arrow-top.svg
sim-arrows-dashed-top
CLASS: --icon-sim-arrows-dashed-top
IMG: /icon/gadgets/sim-arrows-dashed-top.svg
sim-arrows-top
CLASS: --icon-sim-arrows-top
IMG: /icon/gadgets/sim-arrows-top.svg
sim-chevron-top
CLASS: --icon-sim-chevron-top
IMG: /icon/gadgets/sim-chevron-top.svg
sim-chevrons-top
CLASS: --icon-sim-chevrons-top
IMG: /icon/gadgets/sim-chevrons-top.svg
sim-disabled
CLASS: --icon-sim-disabled
IMG: /icon/gadgets/sim-disabled.svg
sim-outline-disabled
CLASS: --icon-sim-outline-disabled
IMG: /icon/gadgets/sim-outline-disabled.svg
sim-outline
CLASS: --icon-sim-outline
IMG: /icon/gadgets/sim-outline.svg
sim-solid
CLASS: --icon-sim-solid
IMG: /icon/gadgets/sim-solid.svg

Branch

branch-three-a
CLASS: --icon-branch-three-a
IMG: /icon/workflow/branch-three-a.svg
branch-three-b
CLASS: --icon-branch-three-b
IMG: /icon/workflow/branch-three-b.svg
branch-three-c
CLASS: --icon-branch-three-c
IMG: /icon/workflow/branch-three-c.svg
branch-three-d
CLASS: --icon-branch-three-d
IMG: /icon/workflow/branch-three-d.svg
branch-three-e
CLASS: --icon-branch-three-e
IMG: /icon/workflow/branch-three-e.svg
branch-three-f
CLASS: --icon-branch-three-f
IMG: /icon/workflow/branch-three-f.svg
branch-three-g
CLASS: --icon-branch-three-g
IMG: /icon/workflow/branch-three-g.svg
branch-two-a
CLASS: --icon-branch-two-a
IMG: /icon/workflow/branch-two-a.svg
branch-two-b
CLASS: --icon-branch-two-b
IMG: /icon/workflow/branch-two-b.svg
branch-two-c
CLASS: --icon-branch-two-c
IMG: /icon/workflow/branch-two-c.svg
branch-two-d
CLASS: --icon-branch-two-d
IMG: /icon/workflow/branch-two-d.svg
branch-two-e
CLASS: --icon-branch-two-e
IMG: /icon/workflow/branch-two-e.svg
branch-two-f
CLASS: --icon-branch-two-f
IMG: /icon/workflow/branch-two-f.svg
branch-two-g
CLASS: --icon-branch-two-g
IMG: /icon/workflow/branch-two-g.svg
branch-two-h
CLASS: --icon-branch-two-h
IMG: /icon/workflow/branch-two-h.svg

Merge

merge-three-a
CLASS: --icon-merge-three-a
IMG: /icon/workflow/merge-three-a.svg
merge-three-b
CLASS: --icon-merge-three-b
IMG: /icon/workflow/merge-three-b.svg
merge-three-c
CLASS: --icon-merge-three-c
IMG: /icon/workflow/merge-three-c.svg
merge-three-d
CLASS: --icon-merge-three-d
IMG: /icon/workflow/merge-three-d.svg
merge-three-e
CLASS: --icon-merge-three-e
IMG: /icon/workflow/merge-three-e.svg
merge-three-f
CLASS: --icon-merge-three-f
IMG: /icon/workflow/merge-three-f.svg
merge-three-g
CLASS: --icon-merge-three-g
IMG: /icon/workflow/merge-three-g.svg
merge-two-a
CLASS: --icon-merge-two-a
IMG: /icon/workflow/merge-two-a.svg
merge-two-b
CLASS: --icon-merge-two-b
IMG: /icon/workflow/merge-two-b.svg
merge-two-c
CLASS: --icon-merge-two-c
IMG: /icon/workflow/merge-two-c.svg
merge-two-d
CLASS: --icon-merge-two-d
IMG: /icon/workflow/merge-two-d.svg
merge-two-e
CLASS: --icon-merge-two-e
IMG: /icon/workflow/merge-two-e.svg
merge-two-f
CLASS: --icon-merge-two-f
IMG: /icon/workflow/merge-two-f.svg
merge-two-g
CLASS: --icon-merge-two-g
IMG: /icon/workflow/merge-two-g.svg
merge-two-h
CLASS: --icon-merge-two-h
IMG: /icon/workflow/merge-two-h.svg

New styling options

Shape styles

Every new icon works with the existing --square, --round, and --rounded shape modifiers.

html
Copy
html
Copy