diff --git a/README.md b/README.md
index 796ffa4..5fb01cd 100644
--- a/README.md
+++ b/README.md
@@ -318,6 +318,74 @@ function App() {
}
```
+### `arrow?: string`
+
+You can customize the arrow display using a custom SVG with round borders as in the
+[tippy.js original documentation](https://atomiks.github.io/tippyjs/v6/all-props/#showoncreate)
+
+First you need to import the basic CSS in your app
+```jsx
+import 'tippy.js/dist/svg-arrow.css';
+```
+And then you can implement the arrow SVG this way
+
+```jsx
+import React from 'react';
+import Tippy from '@tippyjs/react';
+
+import { styled, StyledThemeTypes } from 'styled-components';
+
+const SVGArrow = ''
+
+const Tooltip = ({ children, content }) => (
+
+
+
+)
+```
+
+
+You can also customize and add a "border" effect, using two SVG strings, this way one of them act as border
+The following example were using styled-components, but it you can achieve same effect with plain css
+
+```jsx
+import React from 'react';
+import Tippy from '@tippyjs/react';
+
+import { styled, StyledThemeTypes } from 'styled-components';
+
+const SVGArrow = ''
+
+const StyledTooltip = styled(Tippy)`
+ background: red;
+ border: 1px solid purple;
+
+ & .tippy-arrow {
+ color: black;
+ }
+
+ & .tippy-svg-arrow svg{
+ fill:purple;
+ }
+ & .tippy-svg-arrow svg + svg {
+ fill: black;
+ }
+`
+
+const Tooltip = ({ children, content }) => (
+
+
+
+)
+```
+
+
### Plugins
Tippy.js splits certain props into separate pieces of code called plugins to