diff --git a/settings.gradle.kts b/settings.gradle.kts
index 1c923b9a..11152323 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -28,7 +28,7 @@ rootProject.name = "visionforge"
 include(
 //    ":ui",
     ":ui:react",
-//    ":ui:ring",
+    ":ui:ring",
 //    ":ui:material",
     ":ui:bootstrap",
     ":visionforge-core",
diff --git a/ui/ring/build.gradle.kts b/ui/ring/build.gradle.kts
index 16aa8c92..bb80da8f 100644
--- a/ui/ring/build.gradle.kts
+++ b/ui/ring/build.gradle.kts
@@ -13,7 +13,6 @@ kotlin{
 dependencies{
     api(project(":ui:react"))
 
-    implementation(npm("@jetbrains/logos", "1.1.6"))
-    implementation(npm("@jetbrains/ring-ui", "3.0.13"))
-    implementation(npm("svg-inline-loader", "0.8.0"))
+    implementation(npm("@jetbrains/icons", "3.14.1"))
+    implementation(npm("@jetbrains/ring-ui", "4.0.7"))
 }
\ No newline at end of file
diff --git a/ui/ring/src/main/kotlin/ringui/Alert.kt b/ui/ring/src/main/kotlin/ringui/Alert.kt
index 10d9b5a7..2f5c4b8b 100644
--- a/ui/ring/src/main/kotlin/ringui/Alert.kt
+++ b/ui/ring/src/main/kotlin/ringui/Alert.kt
@@ -5,29 +5,29 @@ import react.RHandler
 import react.dom.WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/alert/alert.js
-external interface AlertProps : WithClassName {
-    var timeout: Number
-    var onCloseRequest: () -> Unit
-    var onClose: () -> Unit
-    var isShaking: Boolean
-    var isClosing: Boolean
-    var inline: Boolean
-    var showWithAnimation: Boolean
-    var closeable: Boolean
-    var type: AlertType
+public external interface AlertProps : WithClassName {
+    public var timeout: Number
+    public var onCloseRequest: () -> Unit
+    public var onClose: () -> Unit
+    public var isShaking: Boolean
+    public var isClosing: Boolean
+    public var inline: Boolean
+    public var showWithAnimation: Boolean
+    public var closeable: Boolean
+    public var type: AlertType
 }
 
-typealias AlertType = String
+public typealias AlertType = String
 
-object AlertTypes {
-    var ERROR = "error"
-    var MESSAGE = "message"
-    var SUCCESS = "success"
-    var WARNING = "warning"
-    var LOADING = "loading"
+public object AlertTypes {
+    public var ERROR = "error"
+    public var MESSAGE = "message"
+    public var SUCCESS = "success"
+    public var WARNING = "warning"
+    public var LOADING = "loading"
 }
 
-fun RBuilder.ringAlert(handler: RHandler<AlertProps>) {
+public fun RBuilder.ringAlert(handler: RHandler<AlertProps>) {
     RingUI.Alert {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/Button.kt b/ui/ring/src/main/kotlin/ringui/Button.kt
index cacbcad2..040bb5da 100644
--- a/ui/ring/src/main/kotlin/ringui/Button.kt
+++ b/ui/ring/src/main/kotlin/ringui/Button.kt
@@ -6,29 +6,29 @@ import react.RHandler
 import react.dom.WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/button/button.js
-external interface ButtonProps : WithClassName {
-    var theme: String
-    var active: Boolean
-    var danger: Boolean
-    var delayed: Boolean
-    var loader: Boolean
-    var primary: Boolean
+public external interface ButtonProps : WithClassName {
+    public var theme: String
+    public var active: Boolean
+    public var danger: Boolean
+    public var delayed: Boolean
+    public var loader: Boolean
+    public var primary: Boolean
 
-    var short: Boolean
-    var text: Boolean
-    var inline: Boolean
-    var dropdown: Boolean
+    public var short: Boolean
+    public var text: Boolean
+    public var inline: Boolean
+    public var dropdown: Boolean
 
-    var href: String
+    public var href: String
 
-    var icon: dynamic /* string | func */
-    var iconSize: Number
-    var iconClassName: String
+    public var icon: dynamic /* string | func */
+    public var iconSize: Number
+    public var iconClassName: String
 
-    var onMouseDown: (MouseEvent) -> Unit
+    public var onMouseDown: (MouseEvent) -> Unit
 }
 
-fun RBuilder.ringButton(handler: RHandler<ButtonProps>) {
+public fun RBuilder.ringButton(handler: RHandler<ButtonProps>) {
     RingUI.Button {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/Dialog.kt b/ui/ring/src/main/kotlin/ringui/Dialog.kt
index 6ef54bf5..90ac16b9 100644
--- a/ui/ring/src/main/kotlin/ringui/Dialog.kt
+++ b/ui/ring/src/main/kotlin/ringui/Dialog.kt
@@ -5,22 +5,22 @@ import react.RHandler
 import react.dom.WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/dialog/dialog.js
-external interface DialogProps : WithClassName {
-    var contentClassName: String
-    var show: Boolean
-    var showCloseButton: Boolean
-    var onOverlayClick: () -> Unit
-    var onEscPress: () -> Unit
-    var onCloseClick: () -> Unit
+public external interface DialogProps : WithClassName {
+    public var contentClassName: String
+    public var show: Boolean
+    public var showCloseButton: Boolean
+    public var onOverlayClick: () -> Unit
+    public var onEscPress: () -> Unit
+    public var onCloseClick: () -> Unit
     // onCloseAttempt is a common callback for ESC pressing and overlay clicking.
     // Use it if you don't need different behaviors for this cases.
-    var onCloseAttempt: () -> Unit
+    public var onCloseAttempt: () -> Unit
     // focusTrap may break popups inside dialog, so use it carefully
-    var trapFocus: Boolean
-    var autoFocusFirst: Boolean
+    public var trapFocus: Boolean
+    public var autoFocusFirst: Boolean
 }
 
-fun RBuilder.ringDialog(show: Boolean, handler: RHandler<DialogProps>) {
+public fun RBuilder.ringDialog(show: Boolean, handler: RHandler<DialogProps>) {
     RingUI.Dialog {
         attrs.show = show
         handler()
diff --git a/ui/ring/src/main/kotlin/ringui/Icon.kt b/ui/ring/src/main/kotlin/ringui/Icon.kt
index 3bb9c640..a8ea7d66 100644
--- a/ui/ring/src/main/kotlin/ringui/Icon.kt
+++ b/ui/ring/src/main/kotlin/ringui/Icon.kt
@@ -5,16 +5,16 @@ import react.RHandler
 import react.dom.WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/icon/icon.js
-external interface IconProps : WithClassName {
-    var color: String
-    var glyph: dynamic /* string | func */
-    var height: Number
-    var size: Number
-    var width: Number
-    var loading: Boolean
+public external interface IconProps : WithClassName {
+    public var color: String
+    public var glyph: dynamic /* string | func */
+    public var height: Number
+    public var size: Number
+    public var width: Number
+    public var loading: Boolean
 }
 
-fun RBuilder.ringIcon(handler: RHandler<IconProps>) {
+public fun RBuilder.ringIcon(handler: RHandler<IconProps>) {
     RingUI.Icon {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/Link.kt b/ui/ring/src/main/kotlin/ringui/Link.kt
index bd3d7835..c38239d9 100644
--- a/ui/ring/src/main/kotlin/ringui/Link.kt
+++ b/ui/ring/src/main/kotlin/ringui/Link.kt
@@ -6,9 +6,9 @@ import react.RHandler
 import react.dom.WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/link/link.js
-external interface LinkProps : WithClassName {
-    var innerClassName: String
-    var active: Boolean
+public external interface LinkProps : WithClassName {
+    public var innerClassName: String
+    public var active: Boolean
     var inherit: Boolean
     var pseudo: Boolean
     var hover: Boolean
diff --git a/ui/ring/src/main/kotlin/ringui/RingUI.kt b/ui/ring/src/main/kotlin/ringui/RingUI.kt
index 7d9a475c..816627de 100644
--- a/ui/ring/src/main/kotlin/ringui/RingUI.kt
+++ b/ui/ring/src/main/kotlin/ringui/RingUI.kt
@@ -4,11 +4,11 @@ import react.RClass
 import ringui.header.HeaderProps
 
 @JsModule("@jetbrains/ring-ui")
-external object RingUI {
-    val Alert: RClass<AlertProps>
-    val Button: RClass<ButtonProps>
-    val Dialog: RClass<DialogProps>
-    val Header: RClass<HeaderProps>
-    val Link: RClass<LinkProps>
-    val Icon: RClass<IconProps>
+public external object RingUI {
+    public val Alert: RClass<AlertProps>
+    public val Button: RClass<ButtonProps>
+    public val Dialog: RClass<DialogProps>
+    public val Header: RClass<HeaderProps>
+    public val Link: RClass<LinkProps>
+    public val Icon: RClass<IconProps>
 }
diff --git a/ui/ring/src/main/kotlin/ringui/UserCard.kt b/ui/ring/src/main/kotlin/ringui/UserCard.kt
index 97f5192f..89ab105a 100644
--- a/ui/ring/src/main/kotlin/ringui/UserCard.kt
+++ b/ui/ring/src/main/kotlin/ringui/UserCard.kt
@@ -11,12 +11,12 @@ private external object UserCardModule {
 }
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/user-card/card.js
-external interface UserCardProps : RProps {
-    var user: UserCardModel
-    var wording: UserCardWording
+public external interface UserCardProps : RProps {
+    public var user: UserCardModel
+    public var wording: UserCardWording
 }
 
-data class UserCardModel(
+public data class UserCardModel(
     val name: String,
     val login: String,
     val avatarUrl: String,
@@ -24,13 +24,13 @@ data class UserCardModel(
     val href: String? = null
 )
 
-data class UserCardWording(
+public data class UserCardWording(
     val banned: String,
     val online: String,
     val offline: String
 )
 
-fun RBuilder.ringUserCard(user: UserCardModel, handler: RHandler<UserCardProps> = {}) {
+public fun RBuilder.ringUserCard(user: UserCardModel, handler: RHandler<UserCardProps> = {}) {
     UserCardModule.UserCard {
         attrs.user = user
         handler()
diff --git a/ui/ring/src/main/kotlin/ringui/header/Header.kt b/ui/ring/src/main/kotlin/ringui/header/Header.kt
index a9c9b1d6..379e2539 100644
--- a/ui/ring/src/main/kotlin/ringui/header/Header.kt
+++ b/ui/ring/src/main/kotlin/ringui/header/Header.kt
@@ -19,12 +19,12 @@ internal external object HeaderModule {
 }
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/header/header.js
-external interface HeaderProps : WithClassName {
-    var spaced: Boolean
-    var theme: String
+public external interface HeaderProps : WithClassName {
+    public var spaced: Boolean
+    public var theme: String
 }
 
-fun RBuilder.ringHeader(handler: RHandler<HeaderProps>) {
+public fun RBuilder.ringHeader(handler: RHandler<HeaderProps>) {
     RingUI.Header {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/header/Logo.kt b/ui/ring/src/main/kotlin/ringui/header/Logo.kt
index f6fd40de..5773517d 100644
--- a/ui/ring/src/main/kotlin/ringui/header/Logo.kt
+++ b/ui/ring/src/main/kotlin/ringui/header/Logo.kt
@@ -6,15 +6,15 @@ import react.RHandler
 import ringui.IconProps
 import styled.StyledDOMBuilder
 
-external interface HeaderLogoProps : IconProps
+public external interface HeaderLogoProps : IconProps
 
-fun StyledDOMBuilder<A>.ringLogo(handler: RHandler<HeaderLogoProps>) {
+public fun StyledDOMBuilder<A>.ringLogo(handler: RHandler<HeaderLogoProps>) {
     HeaderModule.Logo {
         handler()
     }
 }
 
-fun RElementBuilder<HeaderProps>.ringLogo(handler: RHandler<HeaderLogoProps>) {
+public fun RElementBuilder<HeaderProps>.ringLogo(handler: RHandler<HeaderLogoProps>) {
     HeaderModule.Logo {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/header/Tray.kt b/ui/ring/src/main/kotlin/ringui/header/Tray.kt
index cadac0ee..b04e96a7 100644
--- a/ui/ring/src/main/kotlin/ringui/header/Tray.kt
+++ b/ui/ring/src/main/kotlin/ringui/header/Tray.kt
@@ -6,20 +6,20 @@ import react.dom.WithClassName
 import ringui.ButtonProps
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/header/tray.js
-external interface HeaderTrayProps : WithClassName
+public external interface HeaderTrayProps : WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/header/tray-icon.js
-external interface HeaderTrayIconProps : ButtonProps {
-    var rotatable: Boolean
+public external interface HeaderTrayIconProps : ButtonProps {
+    public var rotatable: Boolean
 }
 
-fun RElementBuilder<HeaderProps>.ringTray(handler: RHandler<HeaderTrayProps>) {
+public fun RElementBuilder<HeaderProps>.ringTray(handler: RHandler<HeaderTrayProps>) {
     HeaderModule.Tray {
         handler()
     }
 }
 
-fun RElementBuilder<HeaderTrayProps>.ringTrayIcon(handler: RHandler<WithClassName>) {
+public fun RElementBuilder<HeaderTrayProps>.ringTrayIcon(handler: RHandler<WithClassName>) {
     HeaderModule.TrayIcon {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/island/Content.kt b/ui/ring/src/main/kotlin/ringui/island/Content.kt
index d183f702..63124dc2 100644
--- a/ui/ring/src/main/kotlin/ringui/island/Content.kt
+++ b/ui/ring/src/main/kotlin/ringui/island/Content.kt
@@ -5,15 +5,15 @@ import react.RHandler
 import react.dom.WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/island/content.js
-external interface IslandContentProps : WithClassName {
-    var scrollableWrapperClassName: String
-    var fade: Boolean
-    var bottomBorder: Boolean
-    var onScroll: () -> Unit
-    var onScrollToBottom: () -> Unit
+public external interface IslandContentProps : WithClassName {
+    public var scrollableWrapperClassName: String
+    public var fade: Boolean
+    public var bottomBorder: Boolean
+    public var onScroll: () -> Unit
+    public var onScrollToBottom: () -> Unit
 }
 
-fun RElementBuilder<IslandProps>.ringIslandContent(handler: RHandler<IslandContentProps>) {
+public fun RElementBuilder<IslandProps>.ringIslandContent(handler: RHandler<IslandContentProps>) {
     IslandModule.Content {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/island/Header.kt b/ui/ring/src/main/kotlin/ringui/island/Header.kt
index 952a3cfc..1a970d89 100644
--- a/ui/ring/src/main/kotlin/ringui/island/Header.kt
+++ b/ui/ring/src/main/kotlin/ringui/island/Header.kt
@@ -5,13 +5,13 @@ import react.RHandler
 import react.dom.WithClassName
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/island/header.js
-external interface IslandHeaderProps : WithClassName {
-    var border: Boolean
-    var wrapWithTitle: Boolean
-    var phase: Number
+public external interface IslandHeaderProps : WithClassName {
+    public var border: Boolean
+    public var wrapWithTitle: Boolean
+    public var phase: Number
 }
 
-fun RElementBuilder<IslandProps>.ringIslandHeader(handler: RHandler<IslandHeaderProps>) {
+public fun RElementBuilder<IslandProps>.ringIslandHeader(handler: RHandler<IslandHeaderProps>) {
     IslandModule.Header {
         handler()
     }
diff --git a/ui/ring/src/main/kotlin/ringui/island/Island.kt b/ui/ring/src/main/kotlin/ringui/island/Island.kt
index 1e02e892..7699f66b 100644
--- a/ui/ring/src/main/kotlin/ringui/island/Island.kt
+++ b/ui/ring/src/main/kotlin/ringui/island/Island.kt
@@ -14,18 +14,18 @@ internal external object IslandModule {
 }
 
 // https://github.com/JetBrains/ring-ui/blob/master/components/island/island.js
-external interface IslandProps : WithClassName {
-    val narrow: Boolean
-    val withoutPaddings: Boolean
+public external interface IslandProps : WithClassName {
+    public val narrow: Boolean
+    public val withoutPaddings: Boolean
 }
 
-fun RBuilder.ringIsland(handler: RHandler<IslandProps>) {
+public fun RBuilder.ringIsland(handler: RHandler<IslandProps>) {
     IslandModule.default {
         handler()
     }
 }
 
-fun RBuilder.ringAdaptiveIsland(handler: RHandler<IslandProps>) {
+public fun RBuilder.ringAdaptiveIsland(handler: RHandler<IslandProps>) {
     IslandModule.AdaptiveIsland {
         handler()
     }
diff --git a/ui/ring/webpack.config.d/01.ring.js b/ui/ring/webpack.config.d/01.ring.js
index 549b6c50..868fde03 100644
--- a/ui/ring/webpack.config.d/01.ring.js
+++ b/ui/ring/webpack.config.d/01.ring.js
@@ -1,7 +1,6 @@
 // wrap is useful, because declaring variables in module can be already declared
 // module creates own lexical environment
-;(function (config) {
+(function (config) {
     const ringConfig = require('@jetbrains/ring-ui/webpack.config').config;
-
     config.module.rules.push(...ringConfig.module.rules);
 })(config);
\ No newline at end of file
diff --git a/ui/ring/webpack.config.d/02.svg.js b/ui/ring/webpack.config.d/02.svg.js
deleted file mode 100644
index df178fd3..00000000
--- a/ui/ring/webpack.config.d/02.svg.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// wrap is useful, because declaring variables in module can be already declared
-// module creates own lexical environment
-;(function (config) {
-    const path = require("path");
-    config.module.rules.push(
-        {
-            test: /\.svg$/,
-            loader: "svg-inline-loader",
-            options: {removeSVGTagAttrs: false},
-            include: [
-                path.resolve(require.resolve("@jetbrains/logos"), "..", "..")
-            ]
-        }
-    );
-})(config);
\ No newline at end of file