diff --git a/package.json b/package.json
index 8c35698c..bf3a9c1f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.7",
+    "version": "2.0.0-beta.8",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -29,7 +29,7 @@
         "dom-renderer": "^2.0.6",
         "mobx": "^6.12.0",
         "regenerator-runtime": "^0.14.1",
-        "web-cell": "^3.0.0-rc.7",
+        "web-cell": "^3.0.0-rc.8",
         "web-utility": "^4.1.3"
     },
     "peerDependencies": {
@@ -70,7 +70,7 @@
         "ts-jest": "^29.1.1",
         "ts-node": "^10.9.2",
         "typedoc": "^0.25.7",
-        "typedoc-plugin-mdn-links": "^3.1.12",
+        "typedoc-plugin-mdn-links": "^3.1.13",
         "typescript": "~5.3.3"
     },
     "scripts": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4bfbdc8b..0432a45a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ dependencies:
     specifier: ^0.14.1
     version: 0.14.1
   web-cell:
-    specifier: ^3.0.0-rc.7
-    version: 3.0.0-rc.7(element-internals-polyfill@1.3.10)(typescript@5.3.3)
+    specifier: ^3.0.0-rc.8
+    version: 3.0.0-rc.8(element-internals-polyfill@1.3.10)(typescript@5.3.3)
   web-utility:
     specifier: ^4.1.3
     version: 4.1.3(typescript@5.3.3)
@@ -113,8 +113,8 @@ devDependencies:
     specifier: ^0.25.7
     version: 0.25.7(typescript@5.3.3)
   typedoc-plugin-mdn-links:
-    specifier: ^3.1.12
-    version: 3.1.12(typedoc@0.25.7)
+    specifier: ^3.1.13
+    version: 3.1.13(typedoc@0.25.7)
   typescript:
     specifier: ~5.3.3
     version: 5.3.3
@@ -4865,8 +4865,8 @@ packages:
     engines: {node: '>=14.16'}
     dev: true
 
-  /typedoc-plugin-mdn-links@3.1.12(typedoc@0.25.7):
-    resolution: {integrity: sha512-B6GLXAq2kL7crem0uJYAN7uMmbBZdf+znUanwk/u6gQQFKveUSzCZrtO9pb0ZIe2uCv1T60XDfcO+bTm7R18aw==}
+  /typedoc-plugin-mdn-links@3.1.13(typedoc@0.25.7):
+    resolution: {integrity: sha512-GDS6wz63kj9JcR4ewGgLzhAlhg3GVxh5d6IRuhmRcLO+LziYyDySa6QFWqrVkWkNoVsfw0IABIhkAj6GdrlwwA==}
     peerDependencies:
       typedoc: '>= 0.23.14 || 0.24.x || 0.25.x'
     dependencies:
@@ -4968,8 +4968,8 @@ packages:
       - typescript
     dev: true
 
-  /web-cell@3.0.0-rc.7(element-internals-polyfill@1.3.10)(typescript@5.3.3):
-    resolution: {integrity: sha512-c4+nelL24NYDEtQMsr5r1ftSO6Jg9KCQJAxHYttBSdiZwrAybhVV/qLEsrI+ax3OLmHKxy7WjBWJVYopcaG54A==}
+  /web-cell@3.0.0-rc.8(element-internals-polyfill@1.3.10)(typescript@5.3.3):
+    resolution: {integrity: sha512-oxgBKP9nv7LFKRQmUBoltxVTlcBPatCvSlsUEaV31GA4tG5OT1e718HDZRrk3bSUfFL8KA6WR/i7wSxZohE20g==}
     peerDependencies:
       '@webcomponents/webcomponentsjs': ^2.8
       core-js: ^3
diff --git a/source/Button.tsx b/source/Button.tsx
index 6bfaa363..1e3d3317 100644
--- a/source/Button.tsx
+++ b/source/Button.tsx
@@ -18,12 +18,18 @@ export const Button: FC<ButtonProps> = ({
     className,
     href,
     variant,
+    size,
     active,
     children,
     ...props
 }) => {
     const { disabled, tabIndex } = props,
-        Class = classNames('btn', variant && `btn-${variant}`, className);
+        Class = classNames(
+            'btn',
+            variant && `btn-${variant}`,
+            size && `btn-${size}`,
+            className
+        );
 
     return href ? (
         <a
diff --git a/source/Form.tsx b/source/Form.tsx
index 2bbcdb0a..0bee4ecb 100644
--- a/source/Form.tsx
+++ b/source/Form.tsx
@@ -38,6 +38,38 @@ export const FloatingLabel: FC<FloatingLabelProps> = ({
     </div>
 );
 
+export interface InputGroupProps extends WebCellProps<HTMLDivElement> {
+    size?: 'sm' | 'lg';
+}
+
+export const InputGroup: FC<InputGroupProps> = ({
+    className = '',
+    size,
+    children,
+    ...props
+}) => (
+    <div
+        className={classNames(
+            'input-group',
+            size && `input-group-${size}`,
+            className
+        )}
+        {...props}
+    >
+        {children}
+    </div>
+);
+
+export const InputGroupText: FC<WebCellProps<HTMLSpanElement>> = ({
+    className = '',
+    children,
+    ...props
+}) => (
+    <span className={`input-group-text ${className}`} {...props}>
+        {children}
+    </span>
+);
+
 export type FormControlTag = 'input' | 'textarea' | 'select';
 
 export type FormControlProps<T extends FormControlTag> = WebCellProps &
diff --git a/source/Icon.tsx b/source/Icon.tsx
index 2b4ba9ea..67216b6e 100644
--- a/source/Icon.tsx
+++ b/source/Icon.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { WebCellProps } from 'web-cell';
+import { FC, WebCellProps } from 'web-cell';
 
 import { Color } from './type';
 
@@ -9,7 +9,7 @@ export interface IconProps extends WebCellProps {
     size?: number;
 }
 
-export function Icon({
+export const Icon: FC<IconProps> = ({
     className,
     style,
     color,
@@ -17,19 +17,42 @@ export function Icon({
     size,
     children,
     ...rest
-}: IconProps) {
-    return (
-        <i
-            className={classNames(
-                `bi-${name}`,
-                color && `text-${color}`,
-                className
-            )}
-            style={{
-                ...style,
-                fontSize: size ? `${size}rem` : undefined
-            }}
-            {...rest}
-        />
-    );
+}) => (
+    <i
+        className={classNames(
+            `bi-${name}`,
+            color && `text-${color}`,
+            className
+        )}
+        style={{
+            ...style,
+            fontSize: size ? `${size}rem` : undefined
+        }}
+        {...rest}
+    />
+);
+
+export interface BGIconProps extends IconProps {
+    type?: 'square' | 'circle';
 }
+
+export const BGIcon: FC<BGIconProps> = ({
+    className = '',
+    type = 'square',
+    color = 'primary',
+    children,
+    ...props
+}) => (
+    <span
+        className={classNames(
+            'd-inline-block',
+            'p-3',
+            `bg-${color}`,
+            `rounded${type === 'square' ? '' : '-circle'}`,
+            className
+        )}
+        {...props}
+    >
+        <Icon color={color === 'light' ? 'dark' : 'light'} {...props} />
+    </span>
+);