diff --git a/assets/css/main.css b/assets/css/main.css
index 993f2242..44a233a4 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -3476,6 +3476,15 @@ $('#fadeInLink').on('click', function(e) {
     background-color: #e63a6a !important;
     border: 1px solid #e63a6a !important; }
 
+/* with icon */
+[data-swarm-button][data-icon="left"] .svg-icon,
+[data-swarm-button][data-icon="left"] [data-swarm-icon] {
+  margin-right: var(--space-half); }
+
+[data-swarm-button][data-icon="right"] .svg-icon,
+[data-swarm-button][data-icon="right"] [data-swarm-icon] {
+  margin-left: var(--space-half); }
+
 /*doc
 ---
 title: Cards
diff --git a/assets/scss/components/_button.scss b/assets/scss/components/_button.scss
index 3fa5a888..78cc9475 100644
--- a/assets/scss/components/_button.scss
+++ b/assets/scss/components/_button.scss
@@ -239,3 +239,36 @@
 		border: 1px solid $active !important;
 	}
 }
+
+/* with icon */
+%swarm-button-icon-left {
+	margin-right: var(--space-half);
+}
+%swarm-button-icon-right {
+	margin-left: var(--space-half);
+}
+%swarm-button-icon-only {
+	padding: var(--space-half);
+}
+
+[data-swarm-button][data-icon="left"] .svg-icon,
+[data-swarm-button][data-icon="left"] [data-swarm-icon] {
+	@extend %swarm-button-icon-left;
+}
+
+[data-swarm-button][data-icon="right"] .svg-icon,
+[data-swarm-button][data-icon="right"] [data-swarm-icon] {
+	@extend %swarm-button-icon-right;
+}
+
+[data-swarm-link][data-icon="left"] .svg-icon {
+	@extend %swarm-button-icon-left;
+}
+
+[data-swarm-link][data-icon="right"] .svg-icon {
+	@extend %swarm-button-icon-right;
+}
+
+[data-swarm-link][data-icon="only"] {
+	@extend %swarm-button-icon-only;
+}
diff --git a/src/forms/Button.jsx b/src/forms/Button.jsx
index 80da6f65..4fed0cb7 100644
--- a/src/forms/Button.jsx
+++ b/src/forms/Button.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import Icon from '../media/Icon';
 
-import { Button as SwarmButton, LinkButton as SwarmLink } from '@meetup/swarm-components';
+import { LinkButton as SwarmLink } from '@meetup/swarm-components';
 
 import {
 	getButtonType,
@@ -26,6 +26,11 @@ export class Button extends React.PureComponent {
 			icon,
 			hasHoverShadow, // eslint-disable-line no-unused-vars
 			to,
+			children,
+			iconOnly,
+			forwardedRef,
+			right,
+			iconProps,
 			...other
 		} = this.props;
 
@@ -68,11 +73,11 @@ export class Button extends React.PureComponent {
 						right ? (
 							<React.Fragment>
 								{children}
-								<Icon shape={iconShape} size="xs" />
+								<Icon shape={iconShape} size="xs" {...iconProps} />
 							</React.Fragment>
 						) : (
 							<React.Fragment>
-								<Icon shape={iconShape} size="xs" />
+								<Icon shape={iconShape} size="xs" {...iconProps} />
 								{children}
 							</React.Fragment>
 						)
@@ -85,7 +90,40 @@ export class Button extends React.PureComponent {
 			return <SwarmLink icon={iconShape} grow={fullWidth} {...other} />;
 		}
 
-		return <SwarmButton icon={iconShape} grow={fullWidth} {...other} />;
+		const buttonType = getButtonType(this.props);
+		const width = fullWidth ? 'grow' : 'default';
+
+		return (
+			<button
+				data-swarm-button={buttonType}
+				data-swarm-size={getSwarmSize(this.props)}
+				data-icon={getIconPosition(this.props)}
+				data-swarm-width={width}
+				type="button"
+				ref={forwardedRef}
+				{...other}
+			>
+				{icon ? (
+					<span>
+						{right ? (
+							<span>
+								{children}
+								<Icon shape={iconShape} size="xs" {...iconProps} />
+							</span>
+						) : (
+							<span>
+								<Icon shape={iconShape} size="xs" {...iconProps} />
+								{children}
+							</span>
+						)}
+					</span>
+				) : iconOnly ? (
+					<span>{children}</span>
+				) : (
+					children
+				)}
+			</button>
+		);
 	}
 }
 
diff --git a/src/navigation/Nav.jsx b/src/navigation/Nav.jsx
index 0917df25..f9072af8 100644
--- a/src/navigation/Nav.jsx
+++ b/src/navigation/Nav.jsx
@@ -1,3 +1,4 @@
+// eslint-disable no-undef
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import cx from 'classnames';
@@ -240,7 +241,7 @@ export class Nav extends React.Component {
 				isNewNavsOrder={
 					isNewNavsOrder && (localeCode ? localeCode.includes('en') : false)
 				}
-				hasNewConnections={connections.hasNewConnections}
+				hasNewConnections={connections && connections.hasNewConnections}
 			/>
 		) : (
 			<DropdownLoader label={dropdownLoaderLabel} />
@@ -282,7 +283,11 @@ export class Nav extends React.Component {
 		};
 
 		const getConnectionsIcon = () => (
-			<img className="proIcon" alt={connections.label} src={CONNECTIONS_ICON} />
+			<img
+				className="proIcon"
+				alt={connections && connections.label}
+				src={CONNECTIONS_ICON}
+			/>
 		);
 
 		const getNotificationsIcon = () => {
@@ -399,19 +404,20 @@ export class Nav extends React.Component {
 				linkClassName: 'navItemLink-pro',
 				isTargetBlank: true,
 			},
-			media.isAtMediumUp && {
-				shrink: true,
-				linkTo: connections.link,
-				label: connections.label,
-				labelClassName: 'navItem-label-pro',
-				className: cx('navItem--connections', CLASS_AUTH_ITEM),
-				linkClassName: 'navItemLink-pro',
-				counterBadgeClassName: 'navItem--counterBadgeConnections',
-				icon: getConnectionsIcon(),
-				hasUpdates: connections.hasNewConnections > 0,
-				updatesLabel: updatesLabel,
-				onLinkClick: messages.onLinkClick,
-			},
+			media.isAtMediumUp &&
+				!!connections && {
+					shrink: true,
+					linkTo: connections.link,
+					label: connections.label,
+					labelClassName: 'navItem-label-pro',
+					className: cx('navItem--connections', CLASS_AUTH_ITEM),
+					linkClassName: 'navItemLink-pro',
+					counterBadgeClassName: 'navItem--counterBadgeConnections',
+					icon: getConnectionsIcon(),
+					hasUpdates: connections.hasNewConnections > 0,
+					updatesLabel: updatesLabel,
+					onLinkClick: messages.onLinkClick,
+				},
 			{
 				shrink: true,
 				linkTo: messages.link,