Let IconTitleSubtitleMolecule use BigIcon.

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/setup/biometric/SetupBiometricView.kt

@@ -20,6 +20,7 @@ import io.element.android.features.lockscreen.impl.R
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -51,7 +52,7 @@ fun SetupBiometricView(
 private fun SetupBiometricHeader() {
     val biometricAuth = stringResource(id = R.string.screen_app_lock_biometric_authentication)
     IconTitleSubtitleMolecule(
-        iconImageVector = Icons.Default.Fingerprint,
+        iconStyle = BigIcon.Style.Default(Icons.Default.Fingerprint),
         title = stringResource(id = R.string.screen_app_lock_settings_enable_biometric_unlock),
         subTitle = stringResource(id = R.string.screen_app_lock_setup_biometric_unlock_subtitle, biometricAuth),
     )

features/lockscreen/impl/src/main/kotlin/io/element/android/features/lockscreen/impl/setup/pin/SetupPinView.kt

@@ -33,6 +33,7 @@ import io.element.android.features.lockscreen.impl.R
 import io.element.android.features.lockscreen.impl.components.PinEntryTextField
 import io.element.android.features.lockscreen.impl.setup.pin.validation.SetupPinFailure
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -88,7 +89,7 @@ private fun SetupPinHeader(
                 stringResource(id = R.string.screen_app_lock_setup_choose_pin)
             },
             subTitle = stringResource(id = R.string.screen_app_lock_setup_pin_context, appName),
-            iconImageVector = Icons.Filled.Lock,
+            iconStyle = BigIcon.Style.Default(Icons.Filled.Lock),
         )
     }
 }

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/changeaccountprovider/ChangeAccountProviderView.kt

@@ -22,7 +22,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Home
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -34,6 +33,7 @@ import io.element.android.features.login.impl.accountprovider.AccountProviderVie
 import io.element.android.features.login.impl.changeserver.ChangeServerEvents
 import io.element.android.features.login.impl.changeserver.ChangeServerView
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -74,8 +74,7 @@ fun ChangeAccountProviderView(
             ) {
                 IconTitleSubtitleMolecule(
                     modifier = Modifier.padding(top = 16.dp, bottom = 32.dp, start = 16.dp, end = 16.dp),
-                    iconImageVector = Icons.Filled.Home,
+                    iconStyle = BigIcon.Style.Default(Icons.Filled.Home),
-                    iconTint = MaterialTheme.colorScheme.primary,
                     title = stringResource(id = R.string.screen_change_account_provider_title),
                     subTitle = stringResource(id = R.string.screen_change_account_provider_subtitle),
                 )

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/confirmaccountprovider/ConfirmAccountProviderView.kt

@@ -27,6 +27,7 @@ import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
@@ -59,7 +60,7 @@ fun ConfirmAccountProviderView(
         header = {
             IconTitleSubtitleMolecule(
                 modifier = Modifier.padding(top = 60.dp),
-                iconImageVector = Icons.Filled.AccountCircle,
+                iconStyle = BigIcon.Style.Default(Icons.Filled.AccountCircle),
                 title = stringResource(
                     id = if (state.isAccountCreation) {
                         R.string.screen_account_provider_signup_title

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/loginpassword/LoginPasswordView.kt

@@ -48,6 +48,7 @@ import io.element.android.features.login.impl.error.loginError
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
 import io.element.android.libraries.designsystem.components.form.textFieldState
@@ -110,7 +111,7 @@ fun LoginPasswordView(
             // Title
             IconTitleSubtitleMolecule(
                 modifier = Modifier.padding(top = 20.dp, start = 16.dp, end = 16.dp),
-                iconImageVector = Icons.Filled.AccountCircle,
+                iconStyle = BigIcon.Style.Default(Icons.Filled.AccountCircle),
                 title = stringResource(
                     id = R.string.screen_account_provider_signin_title,
                     state.accountProvider.title

features/login/impl/src/main/kotlin/io/element/android/features/login/impl/screens/searchaccountprovider/SearchAccountProviderView.kt

@@ -48,6 +48,7 @@ import io.element.android.features.login.impl.changeserver.ChangeServerView
 import io.element.android.features.login.impl.resolver.HomeserverData
 import io.element.android.libraries.architecture.AsyncData
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.form.textFieldState
 import io.element.android.libraries.designsystem.preview.ElementPreview
@@ -94,7 +95,7 @@ fun SearchAccountProviderView(
                 item {
                     IconTitleSubtitleMolecule(
                         modifier = Modifier.padding(top = 16.dp, bottom = 40.dp, start = 16.dp, end = 16.dp),
-                        iconImageVector = CompoundIcons.Search(),
+                        iconStyle = BigIcon.Style.Default(CompoundIcons.Search()),
                         title = stringResource(id = R.string.screen_account_provider_form_title),
                         subTitle = stringResource(id = R.string.screen_account_provider_form_subtitle),
                     )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/crypto/sendfailure/resolve/ResolveVerifiedUserSendFailureView.kt

@@ -24,11 +24,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
-import io.element.android.compound.theme.ElementTheme
-import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.crypto.sendfailure.VerifiedUserSendFailure
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -80,9 +79,7 @@ fun ResolveVerifiedUserSendFailureView(
                     modifier = Modifier.padding(24.dp),
                     title = state.verifiedUserSendFailure.title(),
                     subTitle = state.verifiedUserSendFailure.subtitle(),
-                    iconImageVector = CompoundIcons.Error(),
+                    iconStyle = BigIcon.Style.AlertSolid,
-                    iconTint = ElementTheme.colors.iconCriticalPrimary,
-                    iconBackgroundTint = ElementTheme.colors.bgCriticalSubtle,
                 )
                 ButtonColumnMolecule(
                     modifier = Modifier.padding(horizontal = 16.dp, vertical = 16.dp),

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/pinned/list/PinnedMessagesListView.kt

@@ -24,6 +24,7 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import im.vector.app.features.analytics.plan.Interaction
 import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.messages.impl.actionlist.ActionListEvents
 import io.element.android.features.messages.impl.actionlist.ActionListView
 import io.element.android.features.messages.impl.actionlist.model.TimelineItemAction
@@ -36,9 +37,9 @@ import io.element.android.features.messages.impl.timeline.protection.TimelinePro
 import io.element.android.features.messages.impl.timeline.protection.TimelineProtectionState
 import io.element.android.features.poll.api.pollcontent.PollTitleView
 import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.dialogs.ErrorDialog
-import io.element.android.libraries.designsystem.icons.CompoundDrawables
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
@@ -154,7 +155,7 @@ private fun PinnedMessagesListEmpty(
         IconTitleSubtitleMolecule(
             title = stringResource(id = CommonStrings.screen_pinned_timeline_empty_state_headline),
             subTitle = stringResource(id = CommonStrings.screen_pinned_timeline_empty_state_description, pinActionText),
-            iconResourceId = CompoundDrawables.ic_compound_pin,
+            iconStyle = BigIcon.Style.Default(CompoundIcons.Pin()),
         )
     }
 }

features/signedout/impl/src/main/kotlin/io/element/android/features/signedout/impl/SignedOutView.kt

@@ -29,6 +29,7 @@ import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubti
 import io.element.android.libraries.designsystem.atomic.organisms.InfoListItem
 import io.element.android.libraries.designsystem.atomic.organisms.InfoListOrganism
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.BigIcon
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
@@ -63,8 +64,7 @@ private fun SignedOutHeader(state: SignedOutState) {
         modifier = Modifier.padding(top = 60.dp, bottom = 12.dp),
         title = stringResource(id = R.string.screen_signed_out_title),
         subTitle = stringResource(id = R.string.screen_signed_out_subtitle, state.appName),
-        iconImageVector = Icons.Filled.AccountCircle,
+        iconStyle = BigIcon.Style.Default(Icons.Filled.AccountCircle),
-        iconTint = ElementTheme.colors.iconSecondary,
     )
 }
 

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/IconTitleSubtitleMolecule.kt

@@ -15,19 +15,14 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
-import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom
+import io.element.android.libraries.designsystem.components.BigIcon
-import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize
-import io.element.android.libraries.designsystem.icons.CompoundDrawables
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Text
-import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
 
 /**
  * IconTitleSubtitleMolecule is a molecule which displays an icon, a title and a subtitle.
@@ -35,30 +30,19 @@ import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
  * @param title the title to display
  * @param subTitle the subtitle to display
  * @param modifier the modifier to apply to this layout
- * @param iconResourceId the resource id of the icon to display, exclusive with [iconImageVector]
+ * @param iconStyle the style of the [BigIcon] to display
- * @param iconImageVector the image vector of the icon to display, exclusive with [iconResourceId]
- * @param iconTint the tint to apply to the icon
- * @param iconBackgroundTint the tint to apply to the icon background
  */
 @Composable
 fun IconTitleSubtitleMolecule(
     title: String,
     subTitle: String?,
+    iconStyle: BigIcon.Style,
     modifier: Modifier = Modifier,
-    iconResourceId: Int? = null,
-    iconImageVector: ImageVector? = null,
-    iconTint: Color = MaterialTheme.colorScheme.primary,
-    iconBackgroundTint: Color = ElementTheme.colors.temporaryColorBgSpecial,
 ) {
     Column(modifier) {
-        RoundedIconAtom(
+        BigIcon(
-            modifier = Modifier
+            modifier = Modifier.align(Alignment.CenterHorizontally),
-                .align(Alignment.CenterHorizontally),
+            style = iconStyle,
-            size = RoundedIconAtomSize.Large,
-            resourceId = iconResourceId,
-            imageVector = iconImageVector,
-            tint = iconTint,
-            backgroundTint = iconBackgroundTint,
         )
         Spacer(modifier = Modifier.height(16.dp))
         Text(
@@ -86,18 +70,7 @@ fun IconTitleSubtitleMolecule(
 @Composable
 internal fun IconTitleSubtitleMoleculePreview() = ElementPreview {
     IconTitleSubtitleMolecule(
-        iconImageVector = CompoundIcons.Chat(),
+        iconStyle = BigIcon.Style.Default(CompoundIcons.Chat()),
-        title = "Title",
-        subTitle = "Subtitle",
-    )
-}
-
-@PreviewsDayNight
-@Composable
-internal fun IconTitleSubtitleMoleculeWithResIconPreview() = ElementPreview {
-    IconTitleSubtitleMolecule(
-        iconResourceId = CompoundDrawables.ic_compound_admin,
-        iconTint = Color.Black,
         title = "Title",
         subTitle = "Subtitle",
     )

tests/konsist/src/test/kotlin/io/element/android/tests/konsist/KonsistPreviewTest.kt

@@ -67,7 +67,6 @@ class KonsistPreviewTest {
                 "ColorAliasesPreview",
                 "DefaultRoomListTopBarWithIndicatorPreview",
                 "GradientFloatingActionButtonCircleShapePreview",
-                "IconTitleSubtitleMoleculeWithResIconPreview",
                 "IconsCompoundPreview",
                 "IconsOtherPreview",
                 "MarkdownTextComposerEditPreview",