diff --git a/CHANGELOG.md b/CHANGELOG.md
index d92c3b721..4b32d7ea6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
## [Unreleased]
+### Added
+- `IconBars`, `IconUser` and `IconShoppingCart` components
## [7.1.0] - 2018-10-03
diff --git a/react/IconBars.js b/react/IconBars.js
new file mode 100644
index 000000000..c5c17d306
--- /dev/null
+++ b/react/IconBars.js
@@ -0,0 +1,3 @@
+import Bars from './components/icon/Bars/index'
+
+export default Bars
diff --git a/react/IconShoppingCart.js b/react/IconShoppingCart.js
new file mode 100644
index 000000000..c58607d73
--- /dev/null
+++ b/react/IconShoppingCart.js
@@ -0,0 +1,3 @@
+import ShoppingCart from './components/icon/ShoppingCart/index'
+
+export default ShoppingCart
diff --git a/react/IconUser.js b/react/IconUser.js
new file mode 100644
index 000000000..cc4fb110c
--- /dev/null
+++ b/react/IconUser.js
@@ -0,0 +1,3 @@
+import User from './components/icon/User/index'
+
+export default User
diff --git a/react/components/icon/Bars/index.js b/react/components/icon/Bars/index.js
new file mode 100644
index 000000000..9c3480e88
--- /dev/null
+++ b/react/components/icon/Bars/index.js
@@ -0,0 +1,47 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { calcIconSize, baseClassname } from '../utils'
+
+const iconBase = {
+ width: 18,
+ height: 12,
+}
+
+class Bars extends PureComponent {
+ render() {
+ const { color, size, block } = this.props
+ const newSize = calcIconSize(iconBase, size)
+
+ return (
+
+ )
+ }
+}
+
+Bars.defaultProps = {
+ color: 'currentColor',
+ size: 20,
+ block: false,
+}
+
+Bars.propTypes = {
+ color: PropTypes.string,
+ size: PropTypes.number,
+ block: PropTypes.bool,
+}
+
+export default Bars
diff --git a/react/components/icon/README.md b/react/components/icon/README.md
index 5832d5b7c..70d5961fa 100644
--- a/react/components/icon/README.md
+++ b/react/components/icon/README.md
@@ -4,6 +4,7 @@ Usage: `import from '@vtex/styleguide/lib
const ArrowBack = require('./ArrowBack').default
const ArrowDown = require('./ArrowDown').default
const ArrowUp = require('./ArrowUp').default
+const Bars = require('./Bars').default
const CaretDown = require('./CaretDown').default
const CaretLeft = require('./CaretLeft').default
const CaretRight = require('./CaretRight').default
@@ -27,10 +28,12 @@ const Link = require('./Link').default
const Plus = require('./Plus').default
const Save = require('./Save').default
const Search = require('./Search').default
+const ShoppingCart = require('./ShoppingCart').default
const Success = require('./Success').default
const Upload = require('./Upload').default
const VisibilityOff = require('./VisibilityOff').default
const VisibilityOn = require('./VisibilityOn').default
+const User = require('./User').default
const Warning = require('./Warning').default
const PlusLines = require('./PlusLines').default
@@ -221,7 +224,18 @@ const demoLabel = 'pb3 code c-muted-1 f6'
Warning (solid)
- |
+
+ Bars
+
+ |
+
+ User
+
+ |
+
+ Shopping Cart
+
+ |
diff --git a/react/components/icon/ShoppingCart/index.js b/react/components/icon/ShoppingCart/index.js
new file mode 100644
index 000000000..d5389444d
--- /dev/null
+++ b/react/components/icon/ShoppingCart/index.js
@@ -0,0 +1,53 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { calcIconSize, baseClassname } from '../utils'
+
+const iconBase = {
+ width: 44,
+ height: 44,
+}
+
+class ShoppingCart extends PureComponent {
+ render() {
+ const { color, size, block } = this.props
+ const newSize = calcIconSize(iconBase, size)
+
+ return (
+
+ )
+ }
+}
+
+ShoppingCart.defaultProps = {
+ color: 'currentColor',
+ size: 20,
+ block: false,
+}
+
+ShoppingCart.propTypes = {
+ color: PropTypes.string,
+ size: PropTypes.number,
+ block: PropTypes.bool,
+}
+
+export default ShoppingCart
diff --git a/react/components/icon/User/index.js b/react/components/icon/User/index.js
new file mode 100644
index 000000000..cca7df6cb
--- /dev/null
+++ b/react/components/icon/User/index.js
@@ -0,0 +1,49 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { calcIconSize, baseClassname } from '../utils'
+
+const iconBase = {
+ width: 44,
+ height: 44,
+}
+
+class User extends PureComponent {
+ render() {
+ const { color, size, block } = this.props
+ const newSize = calcIconSize(iconBase, size)
+
+ return (
+
+ )
+ }
+}
+
+User.defaultProps = {
+ color: 'currentColor',
+ size: 20,
+ block: false,
+}
+
+User.propTypes = {
+ color: PropTypes.string,
+ size: PropTypes.number,
+ block: PropTypes.bool,
+}
+
+export default User