import React from "react" ; export const NotificationIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "bell" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M20.52 15.21l-1.8-1.81V8.94a6.86 6.86 0 0 0-5.82-6.88 6.74 6.74 0 0 0-7.62 6.67v4.67l-1.8 1.81A1.64 1.64 0 0 0 4.64 18H8v.34A3.84 3.84 0 0 0 12 22a3.84 3.84 0 0 0 4-3.66V18h3.36a1.64 1.64 0 0 0 1.16-2.79zM14 18.34A1.88 1.88 0 0 1 12 20a1.88 1.88 0 0 1-2-1.66V18h4zM5.51 16l1.18-1.18a2 2 0 0 0 .59-1.42V8.73A4.73 4.73 0 0 1 8.9 5.17 4.67 4.67 0 0 1 12.64 4a4.86 4.86 0 0 1 4.08 4.9v4.5a2 2 0 0 0 .58 1.42L18.49 16z" / > < /g> < /g> < /svg>); export const PlusIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "plus" > < rect width = "24" height = "24" transform = "rotate(180 12 12)" opacity = "0" / > < path d = "M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z" / > < /g> < /g> < /svg>); export const PlusOutlineIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "plus-circle" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" / > < path d = "M15 11h-2V9a1 1 0 0 0-2 0v2H9a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2h2a1 1 0 0 0 0-2z" / > < /g> < /g> < /svg>); export const MessageIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "message-circle" > < circle cx = "12" cy = "12" r = "2" / > < circle cx = "16" cy = "12" r = "2" / > < circle cx = "8" cy = "12" r = "2" / > < path d = "M19.07 4.93a10 10 0 0 0-16.28 11 1.06 1.06 0 0 1 .09.64L2 20.8a1 1 0 0 0 .27.91A1 1 0 0 0 3 22h.2l4.28-.86a1.26 1.26 0 0 1 .64.09 10 10 0 0 0 11-16.28zm.83 8.36a8 8 0 0 1-11 6.08 3.26 3.26 0 0 0-1.25-.26 3.43 3.43 0 0 0-.56.05l-2.82.57.57-2.82a3.09 3.09 0 0 0-.21-1.81 8 8 0 0 1 6.08-11 8 8 0 0 1 9.19 9.19z" / > < rect width = "24" height = "24" opacity = "0" / > < /g> < /g> < /svg>); export const HashIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "hash" > < rect width = "24" height = "24" transform = "rotate(180 12 12)" opacity = "0" / > < path d = "M20 14h-4.3l.73-4H20a1 1 0 0 0 0-2h-3.21l.69-3.81A1 1 0 0 0 16.64 3a1 1 0 0 0-1.22.82L14.67 8h-3.88l.69-3.81A1 1 0 0 0 10.64 3a1 1 0 0 0-1.22.82L8.67 8H4a1 1 0 0 0 0 2h4.3l-.73 4H4a1 1 0 0 0 0 2h3.21l-.69 3.81A1 1 0 0 0 7.36 21a1 1 0 0 0 1.22-.82L9.33 16h3.88l-.69 3.81a1 1 0 0 0 .84 1.19 1 1 0 0 0 1.22-.82l.75-4.18H20a1 1 0 0 0 0-2zM9.7 14l.73-4h3.87l-.73 4z" / > < /g> < /g> < /svg>); export const HeartIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "heart" > < rect width = "24" height = "24" opacity = "0" / > < path fill = "#39948c" d = "M12 21a1 1 0 0 1-.71-.29l-7.77-7.78a5.26 5.26 0 0 1 0-7.4 5.24 5.24 0 0 1 7.4 0L12 6.61l1.08-1.08a5.24 5.24 0 0 1 7.4 0 5.26 5.26 0 0 1 0 7.4l-7.77 7.78A1 1 0 0 1 12 21z" / > < /g> < /g> < /svg>); export const LockIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "lock" > < rect width = "24" height = "24" opacity = "0" / > < circle cx = "12" cy = "15" r = "1" / > < path d = "M17 8h-1V6.11a4 4 0 1 0-8 0V8H7a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3zm-7-1.89A2.06 2.06 0 0 1 12 4a2.06 2.06 0 0 1 2 2.11V8h-4zM12 18a3 3 0 1 1 3-3 3 3 0 0 1-3 3z" / > < /g> < /g> < /svg>); export const MenuIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "menu" > < rect width = "24" height = "24" transform = "rotate(180 12 12)" opacity = "0" / > < rect x = "3" y = "11" width = "18" height = "2" rx = ".95" ry = ".95" / > < rect x = "3" y = "16" width = "18" height = "2" rx = ".95" ry = ".95" / > < rect x = "3" y = "6" width = "18" height = "2" rx = ".95" ry = ".95" / > < /g> < /g> < /svg>); export const SearchIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "search" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M20.71 19.29l-3.4-3.39A7.92 7.92 0 0 0 19 11a8 8 0 1 0-8 8 7.92 7.92 0 0 0 4.9-1.69l3.39 3.4a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 11a6 6 0 1 1 6 6 6 6 0 0 1-6-6z" / > < /g> < /g> < /svg>); export const DropdownIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "arrow-ios-downward" > < rect width = "24" height = "24" opacity = "0" / > < path stroke = "rgb(184, 176, 183)" d = "M12 16a1 1 0 0 1-.64-.23l-6-5a1 1 0 1 1 1.28-1.54L12 13.71l5.36-4.32a1 1 0 0 1 1.41.15 1 1 0 0 1-.14 1.46l-6 4.83A1 1 0 0 1 12 16z" / > < /g> < /g> < /svg>); export const AtIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "at" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M13 2a10 10 0 0 0-5 19.1 10.15 10.15 0 0 0 4 .9 10 10 0 0 0 6.08-2.06 1 1 0 0 0 .19-1.4 1 1 0 0 0-1.41-.19A8 8 0 1 1 12.77 4 8.17 8.17 0 0 1 20 12.22v.68a1.71 1.71 0 0 1-1.78 1.7 1.82 1.82 0 0 1-1.62-1.88V8.4a1 1 0 0 0-1-1 1 1 0 0 0-1 .87 5 5 0 0 0-3.44-1.36A5.09 5.09 0 1 0 15.31 15a3.6 3.6 0 0 0 5.55.61A3.67 3.67 0 0 0 22 12.9v-.68A10.2 10.2 0 0 0 13 2zm-1.82 13.09A3.09 3.09 0 1 1 14.27 12a3.1 3.1 0 0 1-3.09 3.09z" / > < /g> < /g> < /svg>); export const PickerIcon = ( ) => ( < svg style = { { transform : "rotateY(180deg)" } } xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "color-picker" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M19.4 7.34L16.66 4.6A1.92 1.92 0 0 0 14 4.53l-2 2-1.29-1.24a1 1 0 0 0-1.42 1.42L10.53 8 5 13.53a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l5.58-5.58 1.24 1.24a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-1.24-1.24 2-2a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.36l2.69 2.7zm7-7L13.36 8l1.91-2L18 8.73z" / > < /g> < /g> < /svg>); export const EditIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "edit" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M19.4 7.34L16.66 4.6A2 2 0 0 0 14 4.53l-9 9a2 2 0 0 0-.57 1.21L4 18.91a1 1 0 0 0 .29.8A1 1 0 0 0 5 20h.09l4.17-.38a2 2 0 0 0 1.21-.57l9-9a1.92 1.92 0 0 0-.07-2.71zM9.08 17.62l-3 .28.27-3L12 9.32l2.7 2.7zM16 10.68L13.32 8l1.95-2L18 8.73z" / > < /g> < /g> < /svg>); export const InfoIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "info" > < rect width = "24" height = "24" transform = "rotate(180 12 12)" opacity = "0" / > < path d = "M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" / > < circle cx = "12" cy = "8" r = "1" / > < path d = "M12 10a1 1 0 0 0-1 1v5a1 1 0 0 0 2 0v-5a1 1 0 0 0-1-1z" / > < /g> < /g> < /svg>); export const MoreIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "more-vertical" > < rect width = "24" height = "24" transform = "rotate(-90 12 12)" opacity = "0" / > < circle cx = "12" cy = "12" r = "2" / > < circle cx = "12" cy = "5" r = "2" / > < circle cx = "12" cy = "19" r = "2" / > < /g> < /g> < /svg>); export const PersonIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "person" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4zm0-6a2 2 0 1 1-2 2 2 2 0 0 1 2-2z" / > < path d = "M12 13a7 7 0 0 0-7 7 1 1 0 0 0 2 0 5 5 0 0 1 10 0 1 1 0 0 0 2 0 7 7 0 0 0-7-7z" / > < /g> < /g> < /svg>); export const SettingIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "settings-2" > < rect width = "24" height = "24" transform = "rotate(180 12 12)" opacity = "0" / > < path d = "M12.94 22h-1.89a1.68 1.68 0 0 1-1.68-1.68v-1.09a.34.34 0 0 0-.22-.29.38.38 0 0 0-.41 0l-.74.8a1.67 1.67 0 0 1-2.37 0L4.26 18.4a1.66 1.66 0 0 1-.5-1.19 1.72 1.72 0 0 1 .5-1.21l.74-.74a.34.34 0 0 0 0-.37c-.06-.15-.16-.26-.3-.26H3.68A1.69 1.69 0 0 1 2 12.94v-1.89a1.68 1.68 0 0 1 1.68-1.68h1.09a.34.34 0 0 0 .29-.22.38.38 0 0 0 0-.41L4.26 8a1.67 1.67 0 0 1 0-2.37L5.6 4.26a1.65 1.65 0 0 1 1.18-.5 1.72 1.72 0 0 1 1.22.5l.74.74a.34.34 0 0 0 .37 0c.15-.06.26-.16.26-.3V3.68A1.69 1.69 0 0 1 11.06 2H13a1.68 1.68 0 0 1 1.68 1.68v1.09a.34.34 0 0 0 .22.29.38.38 0 0 0 .41 0l.69-.8a1.67 1.67 0 0 1 2.37 0l1.37 1.34a1.67 1.67 0 0 1 .5 1.19 1.63 1.63 0 0 1-.5 1.21l-.74.74a.34.34 0 0 0 0 .37c.06.15.16.26.3.26h1.09A1.69 1.69 0 0 1 22 11.06V13a1.68 1.68 0 0 1-1.68 1.68h-1.09a.34.34 0 0 0-.29.22.34.34 0 0 0 0 .37l.77.77a1.67 1.67 0 0 1 0 2.37l-1.31 1.33a1.65 1.65 0 0 1-1.18.5 1.72 1.72 0 0 1-1.19-.5l-.77-.74a.34.34 0 0 0-.37 0c-.15.06-.26.16-.26.3v1.09A1.69 1.69 0 0 1 12.94 22zm-1.57-2h1.26v-.77a2.33 2.33 0 0 1 1.46-2.14 2.36 2.36 0 0 1 2.59.47l.54.54.88-.88-.54-.55a2.34 2.34 0 0 1-.48-2.56 2.33 2.33 0 0 1 2.14-1.45H20v-1.29h-.77a2.33 2.33 0 0 1-2.14-1.46 2.36 2.36 0 0 1 .47-2.59l.54-.54-.88-.88-.55.54a2.39 2.39 0 0 1-4-1.67V4h-1.3v.77a2.33 2.33 0 0 1-1.46 2.14 2.36 2.36 0 0 1-2.59-.47l-.54-.54-.88.88.54.55a2.39 2.39 0 0 1-1.67 4H4v1.26h.77a2.33 2.33 0 0 1 2.14 1.46 2.36 2.36 0 0 1-.47 2.59l-.54.54.88.88.55-.54a2.39 2.39 0 0 1 4 1.67z" data - name = "&lt;Group&gt;" / > < path d = "M12 15.5a3.5 3.5 0 1 1 3.5-3.5 3.5 3.5 0 0 1-3.5 3.5zm0-5a1.5 1.5 0 1 0 1.5 1.5 1.5 1.5 0 0 0-1.5-1.5z" / > < /g> < /g> < /svg>); export const StarIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "star" > < rect width = "24" height = "24" transform = "rotate(90 12 12)" opacity = "0" / > < path d = "M17.56 21a1 1 0 0 1-.46-.11L12 18.22l-5.1 2.67a1 1 0 0 1-1.45-1.06l1-5.63-4.12-4a1 1 0 0 1-.25-1 1 1 0 0 1 .81-.68l5.7-.83 2.51-5.13a1 1 0 0 1 1.8 0l2.54 5.12 5.7.83a1 1 0 0 1 .81.68 1 1 0 0 1-.25 1l-4.12 4 1 5.63a1 1 0 0 1-.4 1 1 1 0 0 1-.62.18zM12 16.1a.92.92 0 0 1 .46.11l3.77 2-.72-4.21a1 1 0 0 1 .29-.89l3-2.93-4.2-.62a1 1 0 0 1-.71-.56L12 5.25 10.11 9a1 1 0 0 1-.75.54l-4.2.62 3 2.93a1 1 0 0 1 .29.89l-.72 4.16 3.77-2a.92.92 0 0 1 .5-.04z" / > < /g> < /g> < /svg>); export const PhoneIcon = ( ) => ( < svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 24 24" > < g data - name = "Layer 2" > < g data - name = "phone" > < rect width = "24" height = "24" opacity = "0" / > < path d = "M17.4 22A15.42 15.42 0 0 1 2 6.6 4.6 4.6 0 0 1 6.6 2a3.94 3.94 0 0 1 .77.07 3.79 3.79 0 0 1 .72.18 1 1 0 0 1 .65.75l1.37 6a1 1 0 0 1-.26.92c-.13.14-.14.15-1.37.79a9.91 9.91 0 0 0 4.87 4.89c.65-1.24.66-1.25.8-1.38a1 1 0 0 1 .92-.26l6 1.37a1 1 0 0 1 .72.65 4.34 4.34 0 0 1 .19.73 4.77 4.77 0 0 1 .06.76A4.6 4.6 0 0 1 17.4 22zM6.6 4A2.61 2.61 0 0 0 4 6.6 13.41 13.41 0 0 0 17.4 20a2.61 2.61 0 0 0 2.6-2.6v-.33L15.36 16l-.29.55c-.45.87-.78 1.5-1.62 1.16a11.85 11.85 0 0 1-7.18-7.21c-.36-.78.32-1.14 1.18-1.59L8 8.64 6.93 4z" / > < /g> < /g> < /svg>);