diff --git a/webapp/components/FilterPosts/FilterPosts.spec.js b/webapp/components/FilterPosts/FilterPosts.spec.js
index c0ad56843..0cbd3e962 100644
--- a/webapp/components/FilterPosts/FilterPosts.spec.js
+++ b/webapp/components/FilterPosts/FilterPosts.spec.js
@@ -19,6 +19,7 @@ describe('FilterPosts.vue', () => {
   let allCategoriesButton
   let environmentAndNatureButton
   let democracyAndPoliticsButton
+  let happyEmotionButton
 
   beforeEach(() => {
     mocks = {
@@ -52,6 +53,7 @@ describe('FilterPosts.vue', () => {
       'postsFilter/TOGGLE_FILTER_BY_FOLLOWED': jest.fn(),
       'postsFilter/RESET_CATEGORIES': jest.fn(),
       'postsFilter/TOGGLE_CATEGORY': jest.fn(),
+      'postsFilter/TOGGLE_EMOTION': jest.fn(),
     }
     getters = {
       'postsFilter/isActive': () => false,
@@ -121,5 +123,22 @@ describe('FilterPosts.vue', () => {
         expect(mutations['postsFilter/TOGGLE_FILTER_BY_FOLLOWED']).toHaveBeenCalledWith({}, 'u34')
       })
     })
+
+    describe('click on an "emotions-buttons" button', () => {
+      it('calls TOGGLE_EMOTION when clicked', () => {
+        const wrapper = openFilterPosts()
+        happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1)
+        happyEmotionButton.trigger('click')
+        expect(mutations['postsFilter/TOGGLE_EMOTION']).toHaveBeenCalledWith({}, 'happy')
+      })
+
+      it('sets the attribute `src` to colorized image', () => {
+        getters['postsFilter/filteredByEmotions'] = jest.fn(() => ['happy'])
+        const wrapper = openFilterPosts()
+        happyEmotionButton = wrapper.findAll('button.emotions-buttons').at(1)
+        const happyEmotionButtonImage = happyEmotionButton.find('img')
+        expect(happyEmotionButtonImage.attributes().src).toEqual('/img/svg/emoji/happy_color.svg')
+      })
+    })
   })
 })
diff --git a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
index 4dd79591a..183f2b250 100644
--- a/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
+++ b/webapp/components/FilterPosts/GeneralFilterMenuItems.vue
@@ -72,7 +72,7 @@ export default {
   methods: {
     ...mapMutations({
       toggleFilteredByFollowed: 'postsFilter/TOGGLE_FILTER_BY_FOLLOWED',
-      toogleFilteredByEmotions: 'postsFilter/TOGGLE_FILTER_BY_EMOTIONS',
+      toogleFilteredByEmotions: 'postsFilter/TOGGLE_EMOTION',
     }),
     iconPath(emotion) {
       if (this.filteredByEmotions.includes(emotion)) {
diff --git a/webapp/store/postsFilter.js b/webapp/store/postsFilter.js
index 8ad1acbfb..964b265c0 100644
--- a/webapp/store/postsFilter.js
+++ b/webapp/store/postsFilter.js
@@ -40,7 +40,7 @@ export const mutations = {
     if (isEmpty(get(filter, 'categories_some.id_in'))) delete filter.categories_some
     state.filter = filter
   },
-  TOGGLE_FILTER_BY_EMOTIONS(state, emotion) {
+  TOGGLE_EMOTION(state, emotion) {
     const filter = clone(state.filter)
     update(filter, 'emotions_some.emotion_in', emotions => xor(emotions, [emotion]))
     if (isEmpty(get(filter, 'emotions_some.emotion_in'))) delete filter.emotions_some