Vuejs - Svgs partially missing once a third is added - css

Question

Not really sure how to ask this question to be honest, but recently I've started using VueJS and it's incredible!
That being said, with all the learning of Vue, I perhaps have lost a bit of my CSS skills; particularly when it comes to flex. I don't recall ever having this issue previously, but once I added a third SVG to my page, the two previous almost completely disappear, but the newest is fully visible.
Any ideas of what the heck could actually be happening here?
I'm not using SVG loader or anything, but rather a v-else-if to show svgs based on names; perhaps that's the issue? (though if that were, the two previously shown were fine until I added the third.)
Cheers!
NOTE: I'm not adding the SVG code, since I didn't want to have too much code showing in this question, but it's a simple hamburger menu svg, a search svg and the top nav stuff for an iphone.
App.vue
<template>
<div id="app">
<div class="container">
<top-nav-bar></top-nav-bar>
</div>
</div>
</template>
<script>
import TopNavBar from './components/molecules/TopNavBar.vue'
export default {
name: 'App',
components: { TopNavBar },
}
</script>
<style lang="sass">
#app
font-family: Avenir, Helvetica, Arial, sans-serif
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
text-align: center
color: #2c3e50
.container
position: relative
margin: 0 auto
border: 2px solid black
background-color: white
border-radius: 40px
width: 414px
height: 896px
</style>
Component:
<template>
<div class="container">
<icons name="nav-info" />
<icons name="hamburger" />
<icons name="search" />
</div>
</template>
<script>
import Icons from '../atoms/Icons.vue'
export default {
components: { Icons },
}
</script>
<style lang="sass" scoped>
.container
display: flex
flex-direction: column
align-items: center
margin: 0
</style>