Skip to content

[MISC][XY] Add lock-open and thumb-down icons #43

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
qroll merged 1 commit into from
Apr 8, 2026
Merged

[MISC][XY] Add lock-open and thumb-down icons #43

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
3 changes: 3 additions & 0 deletions assets/lock-open-fill.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/lock-open.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/thumb-down-fill.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/thumb-down.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

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": "@lifesg/react-icons",
"version": "1.17.0",
"version": "1.18.0",
"description": "An icon component library for LifeSG and BookingSG web apps",
"main": "dist/cjs/index.js",
"module": "dist/index.js",
Expand Down
4 changes: 4 additions & 0 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,8 @@ export * from "./lightbulb";
export * from "./link";
export * from "./list";
export * from "./lock-fill";
export * from "./lock-open-fill";
export * from "./lock-open";
export * from "./lock";
export * from "./login";
export * from "./logout";
Expand Down Expand Up @@ -215,6 +217,8 @@ export * from "./tablet-fill";
export * from "./tablet";
export * from "./text-fill";
export * from "./text";
export * from "./thumb-down-fill";
export * from "./thumb-down";
export * from "./thumb-up-fill";
export * from "./thumb-up";
export * from "./tick-circle-fill";
Expand Down
18 changes: 18 additions & 0 deletions src/lock-open-fill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import { SVGProps } from "react";
export const LockOpenFillIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M11.0625 13.5581C11.3542 13.2635 11.5 12.9094 11.5 12.4956C11.5 12.0819 11.3527 11.7292 11.0581 11.4375C10.7635 11.1458 10.4094 11 9.99563 11C9.58188 11 9.22917 11.1473 8.9375 11.4419C8.64583 11.7365 8.5 12.0906 8.5 12.5044C8.5 12.9181 8.64729 13.2708 8.94187 13.5625C9.23646 13.8542 9.59062 14 10.0044 14C10.4181 14 10.7708 13.8527 11.0625 13.5581ZM5.49417 18C5.08139 18 4.72917 17.8531 4.4375 17.5594C4.14583 17.2656 4 16.9125 4 16.5V8.5C4 8.0875 4.14687 7.73438 4.44062 7.44063C4.73437 7.14688 5.0875 7 5.5 7H11V5C11 3.89333 11.39 2.95 12.17 2.17C12.95 1.39 13.8933 1 15 1C16 1 16.8715 1.31944 17.6146 1.95833C18.3576 2.59722 18.8056 3.39583 18.9583 4.35417C18.9861 4.52083 18.9304 4.67014 18.7913 4.80208C18.6521 4.93403 18.475 5 18.26 5C18.045 5 17.8681 4.94792 17.7292 4.84375C17.5903 4.73958 17.4931 4.59028 17.4375 4.39583C17.2986 3.85417 17.0063 3.40278 16.5604 3.04167C16.1146 2.68056 15.5944 2.5 15 2.5C14.3056 2.5 13.7153 2.74306 13.2292 3.22917C12.7431 3.71528 12.5 4.30556 12.5 5V7H14.5C14.9125 7 15.2656 7.14688 15.5594 7.44063C15.8531 7.73438 16 8.0875 16 8.5V16.5C16 16.9125 15.8531 17.2656 15.5592 17.5594C15.2653 17.8531 14.9119 18 14.4992 18H5.49417Z"
fill="currentColor"
/>
</svg>
);
LockOpenFillIcon.displayName = "LockOpenFillIcon";
18 changes: 18 additions & 0 deletions src/lock-open.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import { SVGProps } from "react";
export const LockOpenIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M5.5 16.5H14.5V8.5H5.5V16.5ZM11.0625 13.5581C11.3542 13.2635 11.5 12.9094 11.5 12.4956C11.5 12.0819 11.3527 11.7292 11.0581 11.4375C10.7635 11.1458 10.4094 11 9.99563 11C9.58188 11 9.22917 11.1473 8.9375 11.4419C8.64583 11.7365 8.5 12.0906 8.5 12.5044C8.5 12.9181 8.64729 13.2708 8.94187 13.5625C9.23646 13.8542 9.59062 14 10.0044 14C10.4181 14 10.7708 13.8527 11.0625 13.5581ZM5.49417 18C5.08139 18 4.72917 17.8531 4.4375 17.5594C4.14583 17.2656 4 16.9125 4 16.5V8.5C4 8.0875 4.14687 7.73438 4.44062 7.44063C4.73437 7.14688 5.0875 7 5.5 7H11V5C11 3.89333 11.39 2.95 12.17 2.17C12.95 1.39 13.8933 1 15 1C16 1 16.8542 1.29861 17.5625 1.89583C18.2708 2.49306 18.7222 3.24306 18.9167 4.14583C18.9583 4.34028 18.9078 4.53125 18.7652 4.71875C18.6226 4.90625 18.4521 5 18.2537 5C18.0429 5 17.8681 4.94792 17.7292 4.84375C17.5903 4.73958 17.4931 4.59028 17.4375 4.39583C17.2986 3.85417 17.0063 3.40278 16.5604 3.04167C16.1146 2.68056 15.5944 2.5 15 2.5C14.3056 2.5 13.7153 2.74306 13.2292 3.22917C12.7431 3.71528 12.5 4.30556 12.5 5V7H14.5C14.9125 7 15.2656 7.14688 15.5594 7.44063C15.8531 7.73438 16 8.0875 16 8.5V16.5C16 16.9125 15.8531 17.2656 15.5592 17.5594C15.2653 17.8531 14.9119 18 14.4992 18H5.49417Z"
fill="currentColor"
/>
</svg>
);
LockOpenIcon.displayName = "LockOpenIcon";
18 changes: 18 additions & 0 deletions src/thumb-down-fill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import { SVGProps } from "react";
export const ThumbDownFillIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M5.83335 0.833313L14.1667 0.833314L14.1667 11.6666L8.33335 17.5L7.29169 16.4583C7.19446 16.3611 7.1146 16.2291 7.0521 16.0625C6.9896 15.8958 6.95835 15.7361 6.95835 15.5833V15.2916L7.87502 11.6666H3.33335C2.88891 11.6666 2.50002 11.5 2.16669 11.1666C1.83335 10.8333 1.66669 10.4444 1.66669 9.99998L1.66669 8.33331C1.66669 8.23609 1.6771 8.13192 1.69794 8.02081C1.71877 7.9097 1.75002 7.80553 1.79169 7.70831L4.29169 1.83331C4.41669 1.55554 4.62502 1.31943 4.91669 1.12498C5.20835 0.930536 5.51391 0.833313 5.83335 0.833313ZM15.8334 11.6666L15.8334 0.833314L19.1667 0.833314V11.6666H15.8334Z"
fill="currentColor"
/>
</svg>
);
ThumbDownFillIcon.displayName = "ThumbDownFillIcon";
18 changes: 18 additions & 0 deletions src/thumb-down.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from "react";
import { SVGProps } from "react";
export const ThumbDownIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
width="1em"
height="1em"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M5.83335 0.833313L15 0.833314L15 11.6666L9.16669 17.5L8.12502 16.4583C8.0278 16.3611 7.94794 16.2291 7.88544 16.0625C7.82294 15.8958 7.79169 15.7361 7.79169 15.5833V15.2916L8.70835 11.6666L3.33335 11.6666C2.88891 11.6666 2.50002 11.5 2.16669 11.1666C1.83335 10.8333 1.66669 10.4444 1.66669 9.99998L1.66669 8.33331C1.66669 8.23609 1.68058 8.13192 1.70835 8.02081C1.73613 7.9097 1.76391 7.80553 1.79169 7.70831L4.29169 1.83331C4.41669 1.55554 4.62502 1.31942 4.91669 1.12498C5.20835 0.930535 5.51391 0.833313 5.83335 0.833313ZM13.3334 2.49998L5.83335 2.49998L3.33335 8.33331L3.33335 9.99998L10.8334 9.99998L9.70835 14.5833L13.3334 10.9583L13.3334 2.49998ZM15 11.6666V9.99998H17.5L17.5 2.49998L15 2.49998L15 0.833314L19.1667 0.833314L19.1667 11.6666L15 11.6666Z"
fill="currentColor"
/>
</svg>
);
ThumbDownIcon.displayName = "ThumbDownIcon";
8 changes: 8 additions & 0 deletions stories/icon/data.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,8 @@ import {
ListIcon,
LockFillIcon,
LockIcon,
LockOpenFillIcon,
LockOpenIcon,
LoginIcon,
LogoutIcon,
MagnifierIcon,
Expand Down Expand Up @@ -213,6 +215,8 @@ import {
TabletIcon,
TextFillIcon,
TextIcon,
ThumbDownFillIcon,
ThumbDownIcon,
ThumbUpFillIcon,
ThumbUpIcon,
TickCircleFillIcon,
Expand Down Expand Up @@ -409,6 +413,8 @@ export const ICONS: JSX.Element[] = [
// Lock
<LockIcon key="LockIcon" />,
<LockFillIcon key="LockFillIcon" />,
<LockOpenIcon key="LockOpenIcon" />,
<LockOpenFillIcon key="LockOpenFillIcon" />,
// Link
<LinkIcon key="LinkIcon" />,
// Login
Expand Down Expand Up @@ -525,6 +531,8 @@ export const ICONS: JSX.Element[] = [
<TextIcon key="TextIcon" />,
<TextFillIcon key="TextFillIcon" />,
// ThumbUp
<ThumbDownIcon key="ThumbDownIcon" />,
<ThumbDownFillIcon key="ThumbDownFillIcon" />,
<ThumbUpIcon key="ThumbUpIcon" />,
<ThumbUpFillIcon key="ThumbUpFillIcon" />,
// Tick
Expand Down