Skip to content

Flat section icons #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 11, 2025
Merged

Flat section icons #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 120 additions & 1 deletion components/Icons.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2051,6 +2051,114 @@ function Forward ({ className, color='#84839C', width='12', height='12', viewBox
)
}

function Bell ({ className, color = '#84839C', width = 16, height = 16, viewBox = '0 0 16 16' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.3333 10.6667C14.8179 10.6221 14.3346 10.3971 13.9688 10.0312C13.6029 9.66538 13.3779 9.18215 13.3333 8.66667V5.33333C13.3333 3.91885 12.7714 2.56229 11.7712 1.5621C10.771 0.561903 9.41449 0 8 0C6.58551 0 5.22896 0.561903 4.22876 1.5621C3.22857 2.56229 2.66667 3.91885 2.66667 5.33333V8.66667C2.62212 9.18215 2.3971 9.66538 2.03124 10.0312C1.66538 10.3971 1.18215 10.6221 0.666667 10.6667C0.489856 10.6667 0.320286 10.7369 0.195262 10.8619C0.0702379 10.987 0 11.1565 0 11.3333C0 11.5101 0.0702379 11.6797 0.195262 11.8047C0.320286 11.9298 0.489856 12 0.666667 12H15.3333C15.5101 12 15.6797 11.9298 15.8047 11.8047C15.9298 11.6797 16 11.5101 16 11.3333C16 11.1565 15.9298 10.987 15.8047 10.8619C15.6797 10.7369 15.5101 10.6667 15.3333 10.6667Z" fill={color} />
<path d="M7.99992 16C8.70716 16 9.38544 15.7191 9.88554 15.219C10.3856 14.7189 10.6666 14.0406 10.6666 13.3333H5.33325C5.33325 14.0406 5.6142 14.7189 6.1143 15.219C6.6144 15.7191 7.29267 16 7.99992 16Z" fill={color} />
</svg>
)
}

function Plug ({ className, color = '#84839C', width = 16, height = 17, viewBox = '0 0 16 17' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_4_1756)">
<path fillRule="evenodd" clipRule="evenodd" d="M4.38995 13.524L1.33295 16.581L-0.0810547 15.167L2.97595 12.11L4.38995 13.524Z" fill={color} />
<path fillRule="evenodd" clipRule="evenodd" d="M3.97599 6.39498L10.105 12.525L8.39799 14.231C7.58523 15.0439 6.48285 15.5006 5.33334 15.5007C4.18384 15.5008 3.08138 15.0442 2.26849 14.2315C1.4556 13.4187 0.998873 12.3163 0.998779 11.1668C0.998686 10.0173 1.45523 8.91487 2.26799 8.10198L3.97599 6.39498ZM3.97599 9.22398L3.68299 9.51698C3.26092 9.95775 3.02827 10.5463 3.03488 11.1565C3.04149 11.7667 3.28683 12.3501 3.71835 12.7816C4.14987 13.2131 4.73324 13.4585 5.34346 13.4651C5.95368 13.4717 6.54223 13.2391 6.98299 12.817L7.27599 12.524L3.97599 9.22398ZM16.08 1.83298L13.025 4.88998L11.61 3.47598L14.667 0.419983L16.081 1.83398L16.08 1.83298Z" fill={color} />
<path fillRule="evenodd" clipRule="evenodd" d="M7.60192 2.77001C8.0031 2.36214 8.48107 2.03773 9.00825 1.8155C9.53543 1.59327 10.1014 1.47761 10.6735 1.4752C11.2456 1.47278 11.8125 1.58366 12.3415 1.80144C12.8706 2.01922 13.3513 2.33958 13.7559 2.74406C14.1605 3.14853 14.481 3.62911 14.6989 4.15808C14.9169 4.68704 15.028 5.25392 15.0257 5.82602C15.0235 6.39812 14.908 6.96413 14.686 7.49138C14.4639 8.01863 14.1397 8.4967 13.7319 8.89801L12.0239 10.605L5.89492 4.47601L7.60192 2.77001ZM10.6669 3.50001C10.0469 3.50001 9.45392 3.74601 9.01692 4.18301L8.72392 4.47601L12.0239 7.77601L12.3169 7.48401C12.6432 7.1576 12.8653 6.74179 12.9553 6.28914C13.0453 5.83649 12.9991 5.36732 12.8225 4.94093C12.6459 4.51455 12.3469 4.15008 11.9632 3.89361C11.5795 3.63714 11.1284 3.50017 10.6669 3.50001ZM8.07992 7.83301L5.33292 10.581L3.91992 9.16701L6.66792 6.41901L8.07992 7.83301ZM10.0799 9.83301L7.33292 12.581L5.91892 11.167L8.66692 8.41901L10.0809 9.83301H10.0799Z" fill={color} />
</g>
<defs>
<clipPath id="clip0_4_1756">
<rect width={width} height={height} fill="white" transform="translate(0 0.5)" />
</clipPath>
</defs>
</svg>
)
}

function Blockquote ({ className, color='#84839C', width='16', height='16', viewBox='0 0 16 16' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.33333 2.66669C2.44928 2.66669 1.60143 3.01788 0.976311 3.643C0.351189 4.26812 0 5.11597 0 6.00002C0 6.88408 0.351189 7.73192 0.976311 8.35704C1.60143 8.98216 2.44928 9.33335 3.33333 9.33335C3.408 9.33335 3.47867 9.31602 3.552 9.31069C3.18723 10.4676 2.58302 11.5347 1.77867 12.4427C1.54245 12.7061 1.42056 13.0526 1.43981 13.406C1.45906 13.7593 1.61788 14.0905 1.88133 14.3267C2.14478 14.5629 2.49128 14.6848 2.8446 14.6655C3.19791 14.6463 3.52911 14.4875 3.76533 14.224C5.63167 12.1491 6.66502 9.45747 6.66667 6.66669C6.65825 6.59126 6.64308 6.51674 6.62133 6.44402C6.64659 6.29723 6.66174 6.14888 6.66667 6.00002C6.66667 5.11597 6.31548 4.26812 5.69036 3.643C5.06523 3.01788 4.21739 2.66669 3.33333 2.66669Z" fill={color} />
<path d="M15.9999 6.00002C15.9999 5.34075 15.8044 4.69629 15.4382 4.14812C15.0719 3.59996 14.5513 3.17272 13.9422 2.92042C13.3331 2.66813 12.6629 2.60212 12.0163 2.73074C11.3697 2.85935 10.7757 3.17682 10.3096 3.643C9.84339 4.10917 9.52592 4.70312 9.3973 5.34972C9.26869 5.99632 9.3347 6.66655 9.58699 7.27563C9.83928 7.88472 10.2665 8.40532 10.8147 8.77159C11.3628 9.13786 12.0073 9.33335 12.6666 9.33335C12.7413 9.33335 12.8119 9.31602 12.8853 9.31069C12.5205 10.4676 11.9163 11.5347 11.1119 12.4427C10.8757 12.7061 10.7538 13.0526 10.7731 13.406C10.7923 13.7593 10.9511 14.0905 11.2146 14.3267C11.478 14.5629 11.8245 14.6848 12.1779 14.6655C12.5312 14.6463 12.8624 14.4875 13.0986 14.224C14.9649 12.1491 15.9983 9.45747 15.9999 6.66669C15.9915 6.59126 15.9763 6.51674 15.9546 6.44402C15.9798 6.29724 15.995 6.14889 15.9999 6.00002Z" fill={color} />
</svg>
)
}

function BlogPostSection ({ className, width = '16', height = '16', color = '#84839C', viewBox='0 0 16 16' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.3333 0H2.66667C1.95942 0 1.28115 0.280952 0.781049 0.781049C0.280952 1.28115 0 1.95942 0 2.66667L0 13.3333C0 14.0406 0.280952 14.7189 0.781049 15.219C1.28115 15.719 1.95942 16 2.66667 16H13.3333C14.0406 16 14.7189 15.719 15.219 15.219C15.719 14.7189 16 14.0406 16 13.3333V2.66667C16 1.95942 15.719 1.28115 15.219 0.781049C14.7189 0.280952 14.0406 0 13.3333 0ZM13.3333 13.3333H2.66667V2.66667H13.3333V13.3333Z" fill={color} />
<path d="M8 4H4V8H8V4Z" fill={color} />
<path d="M12 9.33334H4V10.6667H12V9.33334Z" fill={color} />
<path d="M11.9999 4H9.33325V5.33333H11.9999V4Z" fill={color} />
<path d="M11.9999 6.66666H9.33325V7.99999H11.9999V6.66666Z" fill={color} />
</svg>
)
}

function Receipt ({ className, width='16', height='16', color = '#84839C', viewBox='0 0 16 16' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.9999 0H1.99992C1.82311 0 1.65354 0.0702379 1.52851 0.195262C1.40349 0.320286 1.33325 0.489856 1.33325 0.666667V15.912L3.99992 14.1333L5.99992 15.4667L7.99992 14.1333L9.99992 15.4667L11.9999 14.1333L14.6666 15.9107V0.666667C14.6666 0.489856 14.5963 0.320286 14.4713 0.195262C14.3463 0.0702379 14.1767 0 13.9999 0ZM8.66658 10H3.99992V8.66667H8.66658V10ZM7.99992 6.66667C7.60436 6.66667 7.21768 6.54937 6.88878 6.32961C6.55988 6.10984 6.30353 5.79749 6.15216 5.43203C6.00078 5.06658 5.96118 4.66445 6.03835 4.27649C6.11552 3.88852 6.306 3.53216 6.5857 3.25245C6.86541 2.97275 7.22178 2.78227 7.60974 2.7051C7.9977 2.62793 8.39983 2.66753 8.76529 2.81891C9.13074 2.97028 9.44309 3.22663 9.66286 3.55553C9.88262 3.88442 9.99992 4.2711 9.99992 4.66667C9.99992 5.1971 9.7892 5.70581 9.41413 6.08088C9.03906 6.45595 8.53035 6.66667 7.99992 6.66667ZM11.9999 10H9.99992V8.66667H11.9999V10Z" fill={color} />
</svg>
)
}

function Case ({ className, width='16', height='15', color = '#84839C', viewBox='0 0 16 15' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 0.666673C11.3387 0.57773 11.3251 0.488666 11.2935 0.405359C11.2619 0.322052 11.2129 0.246399 11.1499 0.183394C11.0869 0.120388 11.0113 0.0714647 10.928 0.0398527C10.8447 0.00824073 10.7556 -0.00534039 10.6667 6.03334e-06H5.33333C5.24439 -0.00534039 5.15532 0.00824073 5.07202 0.0398527C4.98871 0.0714647 4.91306 0.120388 4.85005 0.183394C4.78704 0.246399 4.73812 0.322052 4.70651 0.405359C4.6749 0.488666 4.66132 0.57773 4.66666 0.666673V14.6667H11.3333V0.666673ZM6 1.33334H10V3.33334H6V1.33334Z" fill={color} />
<path d="M14.6667 3.33334H12.6667V14.6667H14.6667C15.0204 14.6667 15.3595 14.5262 15.6096 14.2762C15.8596 14.0261 16.0001 13.687 16.0001 13.3333V4.66668C16.0001 4.31305 15.8596 3.97392 15.6096 3.72387C15.3595 3.47382 15.0204 3.33334 14.6667 3.33334Z" fill={color} />
<path d="M0 4.66668V13.3333C0 13.687 0.140476 14.0261 0.390524 14.2762C0.640573 14.5262 0.979711 14.6667 1.33333 14.6667H3.33333V3.33334H1.33333C0.979711 3.33334 0.640573 3.47382 0.390524 3.72387C0.140476 3.97392 0 4.31305 0 4.66668Z" fill={color} />
</svg>
)
}

function Cup ({ className, width='16', height='16', color = '#84839C', viewBox='0 0 16 16' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0V4C0 6.06548 1.60369 8 4.14142 8C4.48578 9.32947 5.49066 10.3786 6.79016 10.7935C6.612 11.7306 6.28198 12.9044 5.66724 14H4V16H12V14H10.3328C9.71802 12.9044 9.388 11.7306 9.20984 10.7935C10.5093 10.3786 11.5142 9.32947 11.8586 8C14.3879 8 16 6.07178 16 4V0H0ZM2 4V2H4V6C2.89746 6 2 5.10303 2 4ZM14 4C14 5.10303 13.1025 6 12 6V2H14V4Z" fill={color} />
</svg>
)
}

function Feed ({ className, width='14', height='16', color = '#84839C', viewBox='0 0 14 16' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13 0H1C0.447715 0 0 0.447715 0 1V7C0 7.55228 0.447715 8 1 8H13C13.5523 8 14 7.55228 14 7V1C14 0.447715 13.5523 0 13 0Z" fill={color}/>
<path d="M13 10H1C0.734784 10 0.48043 10.1054 0.292893 10.2929C0.105357 10.4804 0 10.7348 0 11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H13C13.2652 12 13.5196 11.8946 13.7071 11.7071C13.8946 11.5196 14 11.2652 14 11C14 10.7348 13.8946 10.4804 13.7071 10.2929C13.5196 10.1054 13.2652 10 13 10Z" fill={color} />
<path d="M13 14H1C0.734784 14 0.48043 14.1054 0.292893 14.2929C0.105357 14.4804 0 14.7348 0 15C0 15.2652 0.105357 15.5196 0.292893 15.7071C0.48043 15.8946 0.734784 16 1 16H13C13.2652 16 13.5196 15.8946 13.7071 15.7071C13.8946 15.5196 14 15.2652 14 15C14 14.7348 13.8946 14.4804 13.7071 14.2929C13.5196 14.1054 13.2652 14 13 14Z" fill={color}/>
</svg>
)
}

function Introduction ({ className, width='16', height='15', color = '#84839C', viewBox='0 0 16 15' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1.5V13.5C0 13.7652 0.105357 14.0196 0.292893 14.2071C0.48043 14.3946 0.734784 14.5 1 14.5H15C15.2652 14.5 15.5196 14.3946 15.7071 14.2071C15.8946 14.0196 16 13.7652 16 13.5V1.5C16 1.23478 15.8946 0.98043 15.7071 0.792893C15.5196 0.605357 15.2652 0.5 15 0.5H1C0.734784 0.5 0.48043 0.605357 0.292893 0.792893C0.105357 0.98043 0 1.23478 0 1.5ZM7.5 10.5H3.5C3.36739 10.5 3.24021 10.4473 3.14645 10.3536C3.05268 10.2598 3 10.1326 3 10V9C3 8.86739 3.05268 8.74021 3.14645 8.64645C3.24021 8.55268 3.36739 8.5 3.5 8.5H7.5C7.63261 8.5 7.75979 8.55268 7.85355 8.64645C7.94732 8.74021 8 8.86739 8 9V10C8 10.1326 7.94732 10.2598 7.85355 10.3536C7.75979 10.4473 7.63261 10.5 7.5 10.5ZM12.5 6.5H3.5C3.36739 6.5 3.24021 6.44732 3.14645 6.35355C3.05268 6.25979 3 6.13261 3 6V5C3 4.86739 3.05268 4.74021 3.14645 4.64645C3.24021 4.55268 3.36739 4.5 3.5 4.5H12.5C12.6326 4.5 12.7598 4.55268 12.8536 4.64645C12.9473 4.74021 13 4.86739 13 5V6C13 6.13261 12.9473 6.25979 12.8536 6.35355C12.7598 6.44732 12.6326 6.5 12.5 6.5Z" fill={color} />
</svg>
)
}

function Press ({ className, width='16', height='16', color = '#84839C', viewBox='0 0 16 16' }) {
return (
<svg className={className} width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg">
<g clipPath="url(#clip0_4_1770)">
<path d="M8 12C10.2093 12 12 10.2093 12 8V4C12 1.79067 10.2093 0 8 0C5.79067 0 4 1.79067 4 4V8C4 10.2093 5.79067 12 8 12Z" fill={color} />
<path d="M8 16C3.588 16 0 12.412 0 8.00002C0 7.26402 0.597333 6.66669 1.33333 6.66669C2.06933 6.66669 2.66667 7.26402 2.66667 8.00002C2.66667 10.9414 5.05867 13.3334 8 13.3334C10.9413 13.3334 13.3333 10.9414 13.3333 8.00002C13.3333 7.26402 13.9307 6.66669 14.6667 6.66669C15.4027 6.66669 16 7.26402 16 8.00002C16 12.412 12.412 16 8 16Z" fill={color}/>
</g>
<defs>
<clipPath id="clip0_4_1770">
<rect width={width} height={height} fill="white" />
</clipPath>
</defs>
</svg>

)
}

const icons = [
Check,
Checkmark,
Expand Down Expand Up @@ -2256,6 +2364,16 @@ const icons = [
ThumbUp,
ThumbDown,
Forward,
Bell,
Plug,
Blockquote,
BlogPostSection,
Cup,
Case,
Receipt,
Feed,
Introduction,
Press,
]

each(icons, (icon) => {
Expand All @@ -2282,5 +2400,6 @@ export { Check, Checkmark, Lock, Notice, Disabled, Help, Search, Draggable,
Flag, Testimonials, Chart, Pause, HubspotLogo, AlignLeftV2, AlignRightV2, AlignCenterV2, AlignJustifyV2, Sidebar, Palette, Lightbox, Filter, Slider,
Flash, Dashboard, Guides, Article, Pulse, Edit, ContentApproved, Dragger, PaperClip, Invoicing, Banking, Checkbox, Circle, Bank, Card, Contract,
MinusCircle, RepeatCircle, BadgeCard, HeadphonesMic, CheckmarkLarge, NoticeOutlined, Archive, Questionnaire, Upload, ShareFeedback, Spaceship, Zap, Tip,
Webpage, LayoutAlternative, GlobeAlternative, AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage, AiLogo, Microphone, ThreeDots, PencilFilled, Stop, Revert, ThumbUp, ThumbDown, Forward,
Webpage, LayoutAlternative, GlobeAlternative, AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage, AiLogo, Microphone, ThreeDots, PencilFilled, Stop, Revert, ThumbUp, ThumbDown, Forward, Bell, Plug, Blockquote, BlogPostSection, Cup, Case, Receipt, Feed, Introduction, Press,

}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@b12/metronome",
"version": "1.1.30",
"version": "1.1.31",
"description": "",
"main": "index.es6.js",
"scripts": {
Expand Down
42 changes: 41 additions & 1 deletion src/react-demo/Icons.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import {
Flash, Dashboard, Guides, Article, Pulse, Edit, ContentApproved, Dragger, PaperClip, Invoicing, Banking, Checkbox, Circle, Bank, Card, Contract,
MinusCircle, RepeatCircle, BadgeCard, HeadphonesMic, CheckmarkLarge, NoticeOutlined, Archive, Questionnaire, Upload, ShareFeedback, Spaceship, Zap, Tip, Webpage, LayoutAlternative, GlobeAlternative,
AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage, AiLogo, Microphone, ThreeDots, PencilFilled,
Stop, Revert, ThumbUp, ThumbDown, Forward,
Stop, Revert, ThumbUp, ThumbDown, Forward, Bell, Plug, Blockquote, BlogPostSection, Cup, Case, Receipt, Feed, Introduction, Press,
} from '../../components/Icons.es6.js'

const ICONS = [
Expand Down Expand Up @@ -797,6 +797,46 @@ const ICONS = [
name: 'Forward',
component: Forward
},
{
name: 'Bell',
component: Bell
},
{
name: 'Plug',
component: Plug
},
{
name: 'Blockquote',
component: Blockquote
},
{
name: 'BlogPostSection',
component: BlogPostSection
},
{
name: 'Cup',
component: Cup
},
{
name: 'Case',
component: Case
},
{
name: 'Receipt',
component: Receipt
},
{
name: 'Feed',
component: Feed
},
{
name: 'Introduction',
component: Introduction
},
{
name: 'Press',
component: Press
},
]

function Icons () {
Expand Down
Loading