diff --git a/packages/components/src/Draft/Defs/Snippets/index.js b/packages/components/src/Draft/Defs/Snippets/index.js
index 1ab7484ab46..1eacffd2403 100644
--- a/packages/components/src/Draft/Defs/Snippets/index.js
+++ b/packages/components/src/Draft/Defs/Snippets/index.js
@@ -24,19 +24,19 @@ const Snippets = (props) => {
       <path d="M -1,-5 L 1,-5 L 1,5 L -1,5 z" {...stroke} />
       <path d="M -1,-5 L 1,-5 L 1,-4 L -1,-4 z M -1,5 L 1,5 L 1,4 L -1,4 z" {...fill} />
     </g>,
-    <radialGradient key="grad" id="snap-male-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
+    <radialGradient key="grad" id="snap-stud-grad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
       <stop offset="30%" style={{ stopColor: 'rgb(235,235,235)', stopOpacity: 1 }} />
       <stop offset="80%" style={{ stopColor: 'rgb(100,100,100)', stopOpacity: 1 }} />
     </radialGradient>,
-    <g id="snap-male" key="snapmale">
+    <g id="snap-stud" key="snapstud">
       <circle cx="0" cy="0" r="3.4" style={{ stroke: '#666', fill: '#dddddd', strokeWidth: 0.3 }} />
-      <circle cx="0" cy="0" r="1.8" style={{ stroke: 'none', fill: 'url(#snap-male-grad)' }} />
+      <circle cx="0" cy="0" r="1.8" style={{ stroke: 'none', fill: 'url(#snap-stud-grad)' }} />
       <path
         style={{ fill: 'none', stroke: '#666', strokeWidth: 0.2 }}
         d="M -2,0 L -3,0 M 2,0 L 3,0 M 0,2 L 0,3 M 0,-2 L 0,-3 M 1.5,1.5 L 2.1,2.1 M -1.5,1.5 L -2.1,2.1 M -1.5,-1.5 L -2.1,-2.1 M 1.5,-1.5 L 2.1,-2.1"
       />
     </g>,
-    <g id="snap-female" key="snapfemale">
+    <g id="snap-socket" key="snapsocket">
       <circle cx="0" cy="0" r="3.4" style={{ stroke: '#666', fill: '#bbbbbb', strokeWidth: 0.3 }} />
       <circle cx="0" cy="0" r="2" style={{ stroke: '#666', fill: '#dddddd', strokeWidth: 0.4 }} />
       <path