React

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js"></script>
<div id="app"></div>

React

const LogIcon = ({logged, ...props}) => (
      <Icon viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"
        logged={logged}
        {...props}
      >
        
        <g id="Style-Guide" stroke="none" strokeWidth="1" fillRule="evenodd">
          <g id="Style-Guide---Elements"   strokeWidth="2.5">
            <g id="Log-Icon-Default"  >
              <Circle id="Oval" cx="20" cy="20" r="20" logged={logged}></Circle>
              <Polyline id="Path-3" logged={logged} strokeLinecap="round" strokeLinejoin="round" points="11.25 21.172136 16.8058998 26.7280358 29.7839355 13.75"></Polyline>
            </g>
          </g>
        </g>
      </Icon>
  );


const Polyline = styled.polyline`
  pointer-events: none;
  fill: #fff;
  stroke: #21ccbf;
  z-index: -1;
`;

const Circle = styled.circle`
  filter: ${props => props.logged ? 'none' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'};
  fill: #fff;
  stroke: #21ccbf;

  &:hover {
    cursor: pointer;
    stroke: #21ccbf;
    fill: #21ccbf;
  }
  
  
  &:hover+${Polyline} {
    stroke: #fff;
    fill: #21ccbf;
  }
`;


const Icon = styled.svg`
  width: 52px;
  height: 52px;

`


ReactDOM.render(<LogIcon />, document.querySelector("#app"))