JSFiddle - React, Tailwind, and code Playground

HTML

<div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.971 47.971"><path d="M28.228 23.986L47.092 5.122a2.998 2.998 0 0 0 0-4.242 2.998 2.998 0 0 0-4.242 0L23.986 19.744 5.121.88a2.998 2.998 0 0 0-4.242 0 2.998 2.998 0 0 0 0 4.242l18.865 18.864L.879 42.85a2.998 2.998 0 1 0 4.242 4.241l18.865-18.864L42.85 47.091c.586.586 1.354.879 2.121.879s1.535-.293 2.121-.879a2.998 2.998 0 0 0 0-4.242L28.228 23.986z" style="fill: red;"></path></svg>Тут текст выбирается</div>

<div class="no-select"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 26 26" style="width: 14px;fill: green;"> <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2 0.7,0l13.4-13.9h0.1v-8.88178e-16c0.4-0.4 1-0.4 1.4,0l1.4,1.4c0.4,0.4 0.4,1 0,1.4l0,0-16,16.6c-0.2,0.2-0.4,0.3-0.7,0.3-0.3,0-0.5-0.1-0.7-0.3l-7.8-8.4-.2-.3z"></path> </svg>Тут не выбирается</div>

CSS

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  text-align: center;
}

div {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 300px;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
    margin: 7.5px 30px;
    font-family: sans-serif;
    transition: all .15s;
    cursor: pointer;
}

div:hover {
  transform: translateY(-2px);
  opacity: .6;
}

div:hover:active {
  transform: none;
  opacity: 1;
}

div:nth-child(1) {
  background: rgba(255, 0, 0, 0.1);
}

div:nth-child(2) {
  background: rgba(0, 128, 0, 0.1);
}

.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

svg {
    display: inline-block;
    width: 12px;
    margin-right: 5px;
}