mirror/formbricks-formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2025-12-31 02:40:31 -06:00
Code Issues Packages Projects Releases 100 Wiki Activity

feat: download-able feedback icons (#2276)

Browse Source 
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>
Co-authored-by: Johannes <johannes@formbricks.com>
This commit is contained in:
Olasunkanmi Balogun
2024-04-08 16:00:50 +01:00
committed by GitHub
parent 25b41b4d3a
commit bfa0130672
11 changed files with 271 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/formbricks-com/components/shared/Footer.tsx
View File

@@ -26,6 +26,7 @@ const navigation = {
{ name: "Terms", href: "/terms", status: true },
{ name: "GDPR FAQ", href: "/gdpr", status: true },
{ name: "GDPR Guide", href: "/gdpr-guide", status: true },
{ name: "Feedback Icon", href: "/feedback-icon", status: true },
],
bestPractices: [
{ name: "Interview Prompt", href: "/interview-prompt", status: true },

1
apps/formbricks-com/pages/feedback-icon/colored-comments-feedback-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m4.42857139 11.28571435h6.57142867l1.71428574 1.71428574v-6.00000009c0-.62857144-.51428572-1.14285716-1.14285716-1.14285716h-7.14285725c-.62857144 0-1.14285716.51428572-1.14285716 1.14285716v3.14285719c0 .62857144.51428572 1.14285716 1.14285716 1.14285716z" fill="#558b2f"/><path d="m9.57142861 7h-6.57142867l-1.71428574 1.71428574v-6.57142867c0-.62857144.51428572-1.14285716 1.14285716-1.14285716h7.14285725c.62857144 0 1.14285716.51428572 1.14285716 1.14285716v3.71428577c0 .62857144-.51428572 1.14285716-1.14285716 1.14285716z" fill="#8bc34a"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 622 B

1
apps/formbricks-com/pages/feedback-icon/comment-dots.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m144 208c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm112 0c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-112-176c-141.4 0-256 93.1-256 208 0 47.6 19.9 91.2 52.9 126.3-14.9 39.4-45.9 72.8-46.4 73.2-6.6 7-8.4 17.2-4.6 26s12.5 14.5 22.1 14.5c61.5 0 110-25.7 139.1-46.3 28.9 9.1 60.1 14.3 92.9 14.3 141.4 0 256-93.1 256-208s-114.6-208-256-208zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8c-18.1-19.3-39.8-51.2-39.8-93.4 0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 752 B

1
apps/formbricks-com/pages/feedback-icon/comments-icon-2.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="m532 386.2c27.5-27.1 44-61.1 44-98.2 0-80-76.5-146.1-176.2-157.9-31.5-57.6-105.5-98.1-191.8-98.1-114.9 0-208 71.6-208 160 0 37 16.5 71 44 98.2-15.3 30.7-37.3 54.5-37.7 54.9-6.3 6.7-8.1 16.5-4.4 25 3.6 8.5 12 14 21.2 14 53.5 0 96.7-20.2 125.2-38.8 9.2 2.1 18.7 3.7 28.4 4.9 31.4 57.4 105.1 97.8 191.3 97.8 20.8 0 40.8-2.4 59.8-6.8 28.5 18.5 71.6 38.8 125.2 38.8 9.2 0 17.5-5.5 21.2-14 3.6-8.5 1.9-18.3-4.4-25-.4-.3-22.5-24.1-37.8-54.8zm-392.8-92.3-17.1 11.1c-14.1 9.1-28.5 16.3-43.1 21.4 2.7-4.7 5.4-9.7 8-14.8l15.5-31.1-24.8-24.5c-13.5-13.4-29.7-35.3-29.7-64 0-60.7 73.3-112 160-112s160 51.3 160 112-73.3 112-160 112c-16.5 0-33-1.9-49-5.6zm359.1 58.1-24.7 24.4 15.5 31.1c2.6 5.1 5.3 10.1 8 14.8-14.6-5.1-29-12.3-43.1-21.4l-17.1-11.1-19.9 4.6c-16 3.7-32.5 5.6-49 5.6-54 0-102.2-20.1-131.3-49.7 101.3-10.8 179.3-77.4 179.3-158.3 0-3.4-.4-6.7-.7-10 64.4 14.5 112.7 56.8 112.7 106 0 28.7-16.2 50.6-29.7 64z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 982 B

1
apps/formbricks-com/pages/feedback-icon/comments-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg"><path d="m416 192c0-88.4-93.1-160-208-160s-208 71.6-208 160c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7s4.1 4.8 7.3 4.8c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9 31.5 57.5 105.5 97.9 191.7 97.9 41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 587 B

1
apps/formbricks-com/pages/feedback-icon/feedback-envelope-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m11.68292688 13.00000007h-9.36585376c-.64390245 0-1.17073172-.52682927-1.17073172-1.17073172v-6.11707324c0-.3804878.17560976-.73170732.49756098-.96585367l5.35609762-3.7463415 5.35609762 3.7463415c.32195122.20487805.49756098.58536586.49756098.96585367v6.11707324c0 .64390245-.52682927 1.17073172-1.17073172 1.17073172z" fill="#78909c"/><path d="m3.48780484 4.21951217h7.02439032v6.43902446h-7.02439032z" fill="#fff"/><path d="m7 4.98048779-1.75609758 2.28292685h3.51219516z" fill="#9c27b0"/><path d="m11.68292688 13.00000007h-9.36585376c-.64390245 0-1.17073172-.52682927-1.17073172-1.17073172v-5.8536586l5.8536586 3.80487809 5.8536586-3.80487809v5.8536586c0 .64390245-.52682927 1.17073172-1.17073172 1.17073172z" fill="#cfd8dc"/><path d="m6.41463414 8.81463417.58536586.38048781.58536586-.3804878v-1.96097565h-1.17073172z" fill="#9c27b0"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 913 B

1
apps/formbricks-com/pages/feedback-icon/feedback-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><defs><style>.a{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;}.b{fill:#000;}</style></defs><path class="a" d="M10.5,43.5h27a2,2,0,0,0,2-2V6.5a2,2,0,0,0-2-2h-27a2,2,0,0,0-2,2v35A2,2,0,0,0,10.5,43.5Z"/><circle class="b" cx="24" cy="34.66" r="0.75"/><path class="a" d="M17.23,19.71a6.77,6.77,0,1,1,13.54,0,6.08,6.08,0,0,1-2,4.79c-1.4,1.12-4.81,3-4.81,5.83v.81"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 445 B

1
apps/formbricks-com/pages/feedback-icon/feedback-message-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg height="48" width="48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientTransform="matrix(.35546484 0 0 .33718472 -123.65334 -134.56596)" gradientUnits="userSpaceOnUse" x1="208.71123" x2="206.5988" y1="669.99457" y2="364.96884"><stop offset="0" stop-color="#4c93dd"/><stop offset="1" stop-color="#56c5fd"/></linearGradient><linearGradient id="b" gradientTransform="matrix(-.0508781 -.78926282 .78926282 -.0508781 -860.6417 87.245409)" gradientUnits="userSpaceOnUse" x1="2" x2="46.540497" y1="1028.3622" y2="1031.0812"><stop offset="0" stop-color="#dcdfe0"/><stop offset="1" stop-color="#fefeff"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="129.653567" x2="129.653567" y1="63.737633" y2="-9.026241"><stop offset="0" stop-color="#3889e9"/><stop offset="1" stop-color="#5ea5fb"/></linearGradient><g transform="matrix(.63218236 0 0 .63218236 5.63629 11.40176)"><circle cx="-12.773349" cy="101.85606" fill="#04a" r="0" stroke-width="1.581822" transform="matrix(-.0643293 -.99792873 .99792873 -.0643293 0 0)"/><g transform="translate(79.262815 -3.172372)"><path d="m-83.256403-9.9229815c-.974141 0-1.758378.7450395-1.758378 1.6690849v52.9574046c0 .924042.784237 1.669085 1.758378 1.669085h27.02476c2.816124 5.010171 6.801076 11.340301 7.425024 11.333295.617476-.0069 4.383703-6.286939 7.081591-11.333295h24.552044c.974141 0 1.758378-.745043 1.758378-1.669085v-52.9574046c0-.9240454-.784237-1.6690849-1.758378-1.6690849z" fill-opacity=".666667"/><path d="m-83.256403-11.504803c-.974141 0-1.758378.745039-1.758378 1.6690844v52.9574046c0 .924042.784237 1.669085 1.758378 1.669085h27.02476c2.816124 5.010171 6.801076 11.340301 7.425024 11.333295.617476-.0069 4.383703-6.286939 7.081591-11.333295h24.552044c.974141 0 1.758378-.745043 1.758378-1.669085v-52.9574046c0-.9240454-.784237-1.6690844-1.758378-1.6690844z" fill="url(#a)"/><path d="m-49.594868-1.4071001a17.39982 17.399823 86.311656 0 0 -1.738666.0257 17.39982 17.399823 86.311656 0 0 -16.245185 18.4827721 17.39982 17.399823 86.311656 0 0 18.482772 16.245185 17.39982 17.399823 86.311656 0 0 16.245182-18.484285 17.39982 17.399823 86.311656 0 0 -16.744103-16.2693741zm-.624408 7.8980779h.0091c.873576 0 1.576894.7033401 1.576894 1.5768941v11.0821041c0 .873631-.703318 1.576893-1.576894 1.576893h-.0091c-.873576 0-1.576894-.703262-1.576894-1.576893v-11.0821041c0-.873554.703318-1.5768941 1.576894-1.5768941zm.0045 17.4002632c.876321 0 1.58143.705112 1.58143 1.58143s-.705109 1.581429-1.58143 1.581429c-.876315 0-1.581429-.705111-1.581429-1.581429s.705114-1.58143 1.581429-1.58143z" fill="url(#b)" stroke-width=".774084"/></g><circle cx="132.25212" cy="27.355547" fill="url(#c)" r="0"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

1
apps/formbricks-com/pages/feedback-icon/feedback-tooltip-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m11.8835 1.4856299h-9.7674995c-.6163956 0-1.1160005.500104-1.1160005 1.1160005v6.2328329c0 .6158965.4996049 1.1160005 1.1160005 1.1160005h1.8611654l.0004991 2.5639062 2.8468993-2.5639062h5.0594357c.616894 0 1.116-.500104 1.116-1.1160005v-6.2328329c-.000499-.6158965-.499605-1.1160005-1.1165-1.1160005zm-7.8783842 4.5004367c-.2760055 0-.4991057-.2235993-.4991057-.4991057 0-.2760055.2231002-.4991058.4991057-.4991058.2755064 0 .4991058.2231003.4991058.4991058 0 .2755064-.2235994.4991057-.4991058.4991057zm1.9964231-.020962c-.2760055 0-.4991058-.2235994-.4991058-.4991058 0-.2760055.2231003-.4991057.4991058-.4991057.2755064 0 .4991058.2231002.4991058.4991057 0 .2755064-.2235994.4991058-.4991058.4991058zm2.0064051.010481c-.275506 0-.499106-.2231003-.499106-.4991057 0-.2755064.2236-.4991058.499106-.4991058.276006 0 .499106.2235994.499106.4991058 0 .2755063-.2236.4991057-.499106.4991057zm1.986441.010481c-.276005 0-.499106-.2235993-.499106-.4991057 0-.2760055.223101-.4991058.499106-.4991058.275506 0 .499106.2231003.499106.4991058 0 .2755064-.2236.4991057-.499106.4991057z" fill="#2980b9"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

261
apps/formbricks-com/pages/feedback-icon/index.tsx Normal file
View File

@@ -0,0 +1,261 @@
import BestPracticeNavigation from "@/components/shared/BestPracticeNavigation";
import HeroTitle from "@/components/shared/HeroTitle";
import Layout from "@/components/shared/Layout";
import Image from "next/image";
import Link from "next/link";
import ColoredCommentsIcon from "./colored-comments-feedback-icon.svg";
import CommentsIcon2 from "./comments-icon-2.svg";
import CommentsIcon from "./comments-icon.svg";
import FeedbackEnvelopeIcon from "./feedback-envelope-icon.svg";
import FeedbackIcon from "./feedback-icon.svg";
import FeedbackMessageIcon from "./feedback-message-icon.svg";
import FeedbackTooltipIcon from "./feedback-tooltip-icon.svg";
import EmailFeedbackIcon from "./send-email-feedback-icon.svg";
const icons = [
{
iconPath: FeedbackIcon,
iconName: "feedback-icon.svg",
altText: "download feedback icon",
},
{
iconPath: FeedbackTooltipIcon,
iconName: "feedback-tooltip.svg",
altText: "download feedback tooltip icon",
},
{
iconPath: CommentsIcon,
iconName: "comments-icon.svg",
altText: "download feedback icon for comments",
},
{
iconPath: ColoredCommentsIcon,
iconName: "colored-comments-icon.svg",
altText: "download colored feedback icon",
},
{
iconPath: CommentsIcon2,
iconName: "comments-icon-2.svg",
altText: "download feedback icon for comments",
},
{
iconPath: FeedbackMessageIcon,
iconName: "feedback-envelope.svg",
altText: "download envelope feedback icon",
},
{
iconPath: EmailFeedbackIcon,
iconName: "send-email-feedback-icon.svg",
altText: "download send email feedback icon",
},
{
iconPath: FeedbackEnvelopeIcon,
iconName: "gui-feedback.svg",
altText: "download message icon for feedback",
},
];
export default function FeedbackBoxPage() {
const handleDownload = (iconPath: string, iconName: string) => {
const link = document.createElement("a");
link.href = iconPath;
link.setAttribute("download", iconName);
document.body.appendChild(link);
link.click();
link.remove();
};
return (
<Layout
title="Feedback Icon: Free library of symbols and SVGs"
description="Our feedback icon gallery offers a diverse collection of high-quality feedback icons that cater to various design preferences.
">
<HeroTitle
headingPt1="Feedback Icon"
subheading="Explore our feedback icon gallery and transform how users interact with your platform. Directly download high-quality SVG feedback icons by clicking on each icon card."
/>
<div className="grid grid-cols-2 items-center gap-8 md:grid-cols-2 md:gap-10 lg:grid-cols-6">
{icons.map((icon) => {
const { iconPath, iconName, altText } = icon;
return (
<div
onClick={() => handleDownload(iconPath, iconName)}
className="h-40 w-40 cursor-pointer rounded-md border-slate-300 bg-slate-200 p-6
transition-transform duration-150 hover:scale-110 dark:border-slate-500 dark:bg-slate-700">
<Image src={iconPath} className="w-full rounded-lg border" alt={altText} />
</div>
);
})}
</div>
<div className="space-y-12">
<div className="mx-auto max-w-4xl text-slate-700">
<h2 className="mb-3 mt-6 text-4xl font-semibold">How to get the best feedback from your users?</h2>
<p>
Getting feedback from users is an important part of any design and product building process. It
helps designers, builders and entrepreneurs to understand how users interact with a website or
application and identify areas for improvement. To get the best feedback from your users, consider
the following tips:
</p>
<ul className="my-2 ml-3 list-disc">
<li>
Make it easy for users to provide feedback by using feedback icons, buttons, or other
interactive elements.{" "}
<Link className="underline" href="https://formbricks.com">
Formbricks is a free and open source micro-survey tool
</Link>{" "}
which makes this really easy. It provides many best practices on how to collect feedback from
your users.
</li>
<li>
Encourage users to provide feedback by offering incentives such as discounts or rewards for
completing surveys or comment forms.
</li>
<li>
Use a variety of feedback tools such as surveys, comment boxes, or feedback icons to provide
users with multiple ways to provide feedback.
</li>
<li>
Act on user feedback by making changes to a website or application based on user suggestions or
comments.
</li>
<li>
Continuously seek feedback from users by regularly updating surveys or comment forms to gather
new feedback.
</li>
</ul>
<p>
By following these tips, designers can get the best feedback from their users and use that
feedback to improve the overall user experience of a website or application.
</p>
<h3 className="mb-3 mt-6 text-3xl font-semibold">Best practices for gathering user feedback</h3>
<p>
Gathering user feedback is an important part of the design and product building process. To gather
the best feedback from users, consider the following best practices:
</p>
<ul className="my-2 ml-3 list-disc">
<li>
<b>Interview Prompt:</b> Target power users in your app and invite them to book an interview.{" "}
<Link target="_blank" href="/interview-prompt" className="underline">
Here is example and in-depth guide on how to do that.
</Link>
</li>
<li>
<b>Product-market Fit Survey:</b> Measure to what extend you have reached the omnious PMF!{" "}
<Link target="_blank" href="/docs/best-practices/pmf-survey" className="underline">
We&apos;ve written up how to do that here.
</Link>
</li>
<li>
<b>Onboarding Segmentation:</b> During Onboarding, many people are used to sharing some insights
around how they found you.{" "}
<Link target="_blank" href="/onboarding-segmentation" className="underline">
Make use of that with this survey template and guide.
</Link>
</li>
<li>
<b>Churn Survey:</b> These insights are pure gold! Sometimes user react annoyed but{" "}
<Link target="_blank" href="/docs/best-practices/cancel-subscription" className="underline">
understanding why they churned is key to building a better product or service.
</Link>
</li>
<li>
<b>Feature Chaser:</b> Built a new feature? Follow up with users right after they used it with
highly targeted in-app surveys.{" "}
<Link target="_blank" href="/feature-chaser" className="underline">
Formbricks is an open-source survey solution which makes this easy.
</Link>
</li>
<li>
<b>Feedback Box:</b> Giving your users a quick and easy way to provide targeted feedback is
invaluable.{" "}
<Link target="_blank" href="/docs/best-practices/feedback-box" className="underline">
Here is a guide on how to do that within a few minutes using Formbricks.
</Link>
</li>
</ul>
</div>
<BestPracticeNavigation />
<div className="mx-auto max-w-4xl text-slate-700">
<h2 className="mb-3 mt-6 text-3xl font-semibold">The history of the feedback icon</h2>
<p>
The feedback icon is a visual representation of the feedback process. It is used to indicate that
a user can provide feedback on a particular element or feature of a website or application. The
feedback icon is typically displayed as a small icon or symbol that is easily recognizable and can
be clicked on to provide feedback. The feedback icon is often used in conjunction with other
elements such as text or buttons to encourage users to provide feedback. The feedback icon is an
important part of the user experience design process as it helps to make it easy for users to
provide feedback and helps to improve the overall user experience.
</p>
<h3 className="mb-3 mt-6 text-3xl font-semibold">Different types of feedback icons</h3>
<p>
There are many different types of feedback icons that can be used to indicate that a user can
provide feedback. Some common types of feedback icons include:
</p>
<ul className="my-2 ml-3 list-disc">
<li>
<b>Feedback envelope icon:</b> This icon is typically used to indicate that a user can send an
email or message to provide feedback.
</li>
<li>
<b> Feedback message icon:</b> This icon is typically used to indicate that a user can provide
feedback by sending a message or comment.
</li>
<li>
<b> Feedback tooltip icon:</b> This icon is typically used to indicate that a user can provide
feedback by hovering over a tooltip or information box.
</li>
<li>
<b>Feedback icon:</b> This icon is typically used to indicate that a user can provide feedback
on a particular element or feature of a website or application.
</li>
</ul>
<p>
These are just a few examples of the many different types of feedback icons that can be used to
indicate that a user can provide feedback. Each type of feedback icon has its own unique design
and purpose, but they all serve the same basic function of encouraging users to provide feedback
on a website or application.
</p>
<h3 className="mb-3 mt-6 text-3xl font-semibold">
How to get the most out of your feedback icon?
</h3>
<p>
Feedback icons can be used in a variety of ways to encourage users to provide feedback on a
website or application. Some common ways to use feedback icons include:
</p>
<ul className="my-2 ml-3 list-disc">
<li>
Placing feedback icons next to important elements or features of a website or application to
encourage users to provide feedback on those elements.
</li>
<li>
Using feedback icons in conjunction with other elements such as text or buttons to encourage
users to provide feedback.
</li>
<li>
Using feedback icons in conjunction with other feedback tools such as surveys or comment boxes
to provide users with multiple ways to provide feedback.
</li>
<li>
Using feedback icons in conjunction with other design elements such as colors or shapes to make
them more visually appealing and engaging to users.
</li>
</ul>
<p>
By using feedback icons in these ways, designers can create a more engaging and interactive user
experience that encourages users to provide feedback and helps to improve the overall user
experience of a website or application.
</p>
</div>
</div>
</Layout>
);
}

1
apps/formbricks-com/pages/feedback-icon/send-email-feedback-icon.svg Normal file
View File

@@ -0,0 +1 @@
<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m3.1785961 9.3930934.020751.113565.4753898 2.5991746c.035466.193174.1645.355033.3440917.433133.1795917.07772.3867258.06112.5512258-.0449.6621501-.427096 1.5269068-.993791 1.5035146-1.026993zm-1.6936706-3.689931c-.258446.09923-.4418107.331641-.4784082.605934-.0362201.274669.080364.546698.3040986.709311l2.4493895 1.782335 8.7000106-6.844481-7.692637 7.578317 3.3484798 2.4365606c.2131709.155068.4878405.201475.7410045.124507.2527866-.07697.4542613-.268633.5448118-.516137l3.5820249-9.8039716c.03622-.09961.01094-.210907-.06452-.285234-.07546-.07433-.186761-.09772-.285989-.05961z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 657 B