diff --git a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift
index 59f6a96a..a26765e6 100644
--- a/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift
+++ b/VDS/Components/Icon/ButtonIcon/ButtonIcon.swift
@@ -8,12 +8,13 @@
 import Foundation
 import UIKit
 import VDSColorTokens
+import Combine
 
 /// A button icon is an interactive element that visually communicates the action it triggers via an icon.
 /// It usually represents a supplementary or utilitarian action. A button icon can stand alone, but often
 /// exists in a group when there are several actions that can be performed.
 @objc(VDSButtonIcon)
-open class ButtonIcon: Control {
+open class ButtonIcon: Control, Changeable, FormFieldable {
     
     //--------------------------------------------------
     // MARK: - Initializers
@@ -77,7 +78,7 @@ open class ButtonIcon: Control {
     private var badgeIndicatorCenterXConstraint: NSLayoutConstraint?
     private var badgeIndicatorCenterYConstraint: NSLayoutConstraint?
     private var currentIconName: Icon.Name? {
-        if let selectedIconName, selectable {
+        if let selectedIconName, isSelected {
             return selectedIconName
         } else {
             return iconName
@@ -144,7 +145,15 @@ open class ButtonIcon: Control {
     open var showBadgeIndicator: Bool = false { didSet { setNeedsUpdate() } }
     
     /// If true, button will be rendered as selected, when it is selectable.
-    open var selectable: Bool = false { didSet { setNeedsUpdate() } }
+    open var selectable: Bool = false {
+        didSet {
+            //unselect
+            if !selectable && isSelected {
+                isSelected = false
+            }
+            setNeedsUpdate()
+        }
+    }
 
     /// Used to move the icon inside the button in both x and y axis.
     open var iconOffset: CGPoint = .init(x: 0, y: 0) { didSet { setNeedsUpdate() } }
@@ -152,6 +161,12 @@ open class ButtonIcon: Control {
     /// Applies expand direction to Badge Indicator if shows badge indicator.
     open var expandDirection: ExpandDirection = .right { didSet { setNeedsUpdate() } }
     
+    open var onChangeSubscriber: AnyCancellable?
+
+    open var inputId: String? { didSet { setNeedsUpdate() } }
+
+    open var value: AnyHashable? { didSet { setNeedsUpdate() } }
+
     //--------------------------------------------------
     // MARK: - Configuration
     //--------------------------------------------------
@@ -199,7 +214,6 @@ open class ButtonIcon: Control {
             $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted)
             $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: .disabled)
             $0.setSurfaceColors(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark, forState: .selected)
-            $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted])
             $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.paletteBlack.withAlphaComponent(0.70), forState: [.selected, .disabled])
         }.eraseToAnyColorable()
     }()
@@ -279,7 +293,6 @@ open class ButtonIcon: Control {
                 $0.setSurfaceColors(VDSColor.backgroundPrimaryDark, VDSColor.backgroundPrimaryLight, forState: .selected)
                 $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: .highlighted)
                 $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: .disabled)
-                $0.setSurfaceColors(VDSColor.interactiveActiveOnlight, VDSColor.interactiveActiveOndark, forState: [.selected, .highlighted])
                 $0.setSurfaceColors(VDSColor.interactiveDisabledOnlight, VDSColor.interactiveDisabledOndark, forState: [.selected, .disabled])
             }.eraseToAnyColorable()
 
@@ -356,6 +369,24 @@ open class ButtonIcon: Control {
         centerYConstraint?.activate()
     }
     
+    /// Executed on initialization for this View.
+    open override func initialSetup() {
+        super.initialSetup()
+        onClick = { control in
+            guard control.isEnabled else { return }
+            if let selectedIconName = control.selectedIconName, control.selectable {
+                control.toggle()
+            }
+        }
+    }
+
+    /// This will change the state of the Selector and execute the actionBlock if provided.
+    open func toggle() {
+        //removed error
+        isSelected.toggle()
+        sendActions(for: .valueChanged)
+    }
+
     /// Resets to default settings.
     open override func reset() {
         super.reset()